index.htm
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" lang="ko" xmlns="http://www.w3.org/1999/xhtml"><head>
<title>XHTML</title>
<script type="text/javascript">
<!--
function reSize(e)
{
var iframeHeight = document.getElementById(e).contentWindow.document.body.scrollHeight;
document.getElementById(e).style.height = iframeHeight;
document.getElementById("report").innerHTML = iframeHeight;
}
//-->
</script>
</head>
<body>
<iframe id="iframe" src="iframe.htm" width="500px" height="200px" scrolling="no"></iframe>
<div id="report">a</div>
</body>
</html>Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML</title>
<script type="text/javascript">
<!--
function showhide(e)
{
if(document.getElementById(e).style.display=='none')
document.getElementById(e).style.display = 'block';
else
document.getElementById(e).style.display = 'block';
parent.reSize("iframe");
}
//-->
</script>
</head>
<body bgcolor="#eeeeee">
<div id="showhide" style="display:none;width:500px;height:500px;position:absolute;">test</div>
<a href="javascript:showhide('showhide')">ShowHide</a>
</body>
</html>ShowHide 버튼을 클릭하게되면, 아이프레임안 문서의 display:none의 div가
block되며, 동시에 부모의 reSize() 함수를 실행합니다.
reSize()함수의 기능은 아이프레임안의 body scrollHeight를 구하여, 값만큼 아이프레임개체 높이를 조절합니다.
HTML 4.01 DTD에서는 문제가 발생하지 않는데, XHTML 1.0 Transitional로 선언한 뒤, 문제가 발생합니다.
div엘리먼트의 postion 스타일 값이 absolute 일 경우, 이 엘리먼트의 크기를 부모가 참조를 못하는 것 같습니다. 반대로 relative일 경우는 참조합니다.
어떻게 해결해야 할까요??