Iframe

아이프레임(iframe)을 이용하여 페이지를 불러들일 때 프레임 높이를 콘텐츠 높이에 맞게 조정하는 스크립트이다. 불러들이는 콘텐츠 페이지의 도메인이 부모창과 다를 경우에는 크로스 사이트 스크립트(Cross Site Script)를 막는 보안 정책 때문에 작동하지 않는다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>프레임 리사이즈</title>
<script type="text/javascript">
function resizeFrame(frm) {
	frm.style.height = "auto";
	contentHeight = frm.contentWindow.document.documentElement.scrollHeight;
	frm.style.height = contentHeight + 4 + "px";
}
window.onload = function () {
	resizeFrame(document.getElementById("embeded-content"));
}
</script>
</head>
<body>
<h1>프레임 리사이즈</h1>
<p><iframe id="embeded-content" width="960" src="http://mydomain.com/"></iframe></p>
</body>
</html>

불러들여지는 콘텐츠에 표준 DTD를 사용해서 브라우저가 표준모드로 랜더링 되게 해야 한다. 대상 브라우저가 IE이고 표준 DTD를 사용할 수 없을 경우 document.documentElement를 document.body로 변경한다.

IE에서는 높이에 4픽셀, 파이어폭스는 1픽셀을 추가해 주어야 스크롤바가 완전히 나오지 않게 된다.

게시판을 불러들이는 경우와 같이 불러들여진 콘텐츠내에서 페이지 이동을 해야 하는 경우에는 불러들여진 페이지에서 아래와 같이 부모창의 프레임 크기 조정 스크립트를 호출해 준다.

<script type="text/javascript">
window.onload = function () {
	parent.resizeFrame(parent.document.getElementById("embeded-content"));
}
</script>

스크롤바가 나왔다가 사라지는 것이 매끄럽지 않게 보일 경우, 아이프레임에 scrolling="no" 속성을 추가하여 스크롤바가 안나오게 할 수 있다. 하지만 스크롤바가 없어서 콘텐츠를 이용할 수 없는 경우가 생길 수 있기 때문에 좋은 방법은 아니다. auto값을 크게 조정하여 기본 프레임 크기를 조정하면 약간 개선할 수 있다.

오페라에서는 변경된 콘텐츠가 기존 콘텐츠보다 높이가 낮을 경우 프레임 크기가 줄어들지 않는 현상이 있다. 이경우 부모창의 스크립트에 약간의 딜레이를 주면 해결할 수 있다. 하지만 스크립트가 너무 복잡해지고, 크기가 줄어들이 않아도 사용에 무리가 있는 것은 아니기 때문에 원래 스크립트에 포함하지는 않았다.

function resizeFrame(frm) {
	frm.style.height = "500px";
	window.setTimeout(function () {
		contentHeight = frm.contentWindow.document.documentElement.scrollHeight;
		frm.style.height = contentHeight + 4 + "px";
	}, 1);
}

지원 브라우저: IE6, IE7, Fx2, Safari3, Opear9(부분적)

Edit - History - Recent Changes - Search

Page last modified on February 08, 2008, at 02:56 PM

hyeonseok.com

Archive / Javascript / Iframe