제목 : 활용예제 : IFrame의 크기를 컨텐츠 크기만큼 동적으로 증가/감소시키기
<!-- IFrameDynamicSizeMain.htm -->
<!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">
<head>
<title></title>
<script language="javascript" type="text/javascript">
//[2] IFrame이 다 로드되면 Sub 페이지에서 현재 함수를 호출해서 동적으로 IFrame의 크기를 Sub 페이지 크기로 변경한다.
function FrameSizeChange(key) {
document.getElementById("frm0").style.height = document.frames["frm0"].divSubPage.offsetHeight;
}
//[1] 폼 로드시 IFrame의 경로로 Sub 페이지를 호출한다. 0px로 호출순간에는 보여지지 않는다.
function window.onload() {
document.getElementById("frm0").src = "IFrameDynamicSizeSub.htm";
}
</script>
</head>
<body>
<div id="div0">
<!-- Sub Page가 출력될 영역 : 기본값 : 0px -->
<iframe frameborder="0" scrolling="no" id="frm0" style="width: 100%; height: 0px;">
</iframe>
</div>
</body>
</html>
<!-- IFrameDynamicSizeSub.htm -->
<!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">
<head>
<title></title>
<script type="text/javascript">
// 페이지 로드시 부모창의 FrameSizeChange 함수 호출
function window.onload() {
if (parent.FrameSizeChange) { // 부모창에 FrameSizeChange 함수가 있다면 실행
parent.FrameSizeChange();
}
}
</script>
</head>
<body>
<div id="divSubPage">
<div id="divContent" style="height: 300px; background-color: Silver;">
안녕하세요.
</div>
</div>
</body>
</html>