iframe 의 사이즈 내부 HTML 파일에서 변경하는 방법

IE에서는 IFrame의 사이즈를 내부 HTML에서 변경하는 방법은 다양하게 있습니다. 뭐 그닥 신경 쓰지 않아도 쉽게 잘 될겁니다. 그런데 Firefox로 보면 참으로 잘 않되는 것이 IFrame 사이즈 변경하는 것일겁니다.

그래서 이것 저것 하다가 구글에 물어 봤더니 헐… 고마운 분이 이미 정리를 해두셨네요.

How to autoresize parent frame height from child frame, Mark Brown’s Blog

위 내용의 소스를 조금 수정해서 지금 일하는 곳의 소스에 맞춰 봤습니다.

<script type="text/javascript">
var ifrContentsTimer;
function autoResizeParent() {
	// if no parent don't attempt to change
	if (parent != null) {
		var frameList = parent.document.body.getElementsByTagName("iframe");
		// is there any frames?
		if (frameList != null) {
			for (var i = 0; i < frameList.length; i++) {
				var srcParent = frameList[i].src;
				srcParent = srcParent.substr(srcParent.lastIndexOf("/"));
				var srcSelf = document.location.pathname.substr(document.location.pathname.lastIndexOf("/"));
				//alert("Parent(srcParent)=" + srcParent + "\nFrame(srcSelf)="+ srcSelf + "\nsrcParent.indexOf(srcSelf)=" + srcParent.indexOf(srcSelf));
				// found myself
				if ( srcParent.indexOf(srcSelf) > -1 ) {
					// set parent frame height to my height
					frameList[i].height = document.body.offsetHeight;
					// set parent frame width to my width
					frameList[i].width = document.body.offsetWidth;
					// force scrolling off
					frameList[i].scrolling = "no";
				}
			}
		}
	}
}

function resizeRetry() {
	if(document.readyState == "complete") {
		clearInterval(ifrContentsTimer);
	} else {
		autoResizeParent();
	}
}
</script>
<body onload="autoResizeParent();ifrContentsTimer = setInterval('resizeRetry()',100);" ... >

뭐 다른것은 iframe 소스와 내부 HTML 경로를 비교하는 방법을 바꾼것과 iframe의 width도 바꾸도록 한것입니다. 그리고 HTML이 처음 파싱될때 실행 그리고 이미지나 기타 파일들까지 모두 로딩이 끝났을때 다시 실행 시키기 위해 위와 같이 사용했습니다. 뭐 이건 편하신대로 알아서 하셔도 될것 같네요.

Published by: benant

WEB PROGRAMMER. PHP, nodeJs, ASP, XML, Javascript, VBScript, PL/SQL, MySQL, Oracle. scrollads.co.kr 새로운 모바일 광고 서비스. trenue.com 시스탬 트래이딩 서비스. blogman.co.kr 블로그 운영 관리 서비스. creget.co.kr 해외 상품 구매대행. 핫딜 정보 제공 서비스. fgshop.co.kr - 독립형 쇼핑몰 솔루션.

카테고리 일상의 기록, Web태그댓글 남기기

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중