Iframe Height Adjustment

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>아이프레임 리사이즈</title>
</head>
<body>
<h1>프레임 리사이즈</h1>
<p><iframe id="embeded-content" width="90%" src="iframe.php"></iframe></p>
<script type="text/javascript">
function resize_frame(id) {
	var frm = document.getElementById("embeded-content");
	function resize() {
		frm.style.height = "auto";	// set default height for Opera
		contentHeight = frm.contentWindow.document.documentElement.scrollHeight;
		frm.style.height = contentHeight + 23 + "px";	// 23px for IE7
	}
	if (frm.addEventListener) {
		frm.addEventListener('load', resize, false);
	} else {
		frm.attachEvent('onload', resize);
	}
}
resize_frame('embeded-content');
</script>
</body>
</html>

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

인터넷 익스플로러에서는 scrollHeight의 값이 부정확하기 때문에 23픽셀을 추가하였다.

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

IE6, IE7, IE8, Opera 11.62, Firefox 11.0, Safari 5.1.5, Chrome 18.0에서 테스트 되었다.

Iframe Height Adjustment

Search