1. 브라우저 창의 크기에 따라서 자동으로 높이 조절하기
|
<HTML>
<BODY>
<h4>브라우저 창의 크기에 따라서 자동으로 높이 조절하기</h4>
<iframe id="wsos" name="wsos" src="/webdevdoc/index.php" style="width:100%;height:expression(document.body.clientHeight-60)" frameborder="0" framespacing="0" scrolling="yes"></iframe>
</BODY>
</HTML>
|
2. iframe 내 페이지 높이에 맞게 자동 조절하기
|
<HTML>
<head>
<script language='JavaScript' type='text/javascript'>
function resizeFrame(iframeObj){
var innerBody = iframeObj.contentWindow.document.body;
oldEvent = innerBody.onclick;
innerBody.onclick = function(){ resizeFrame(iframeObj, 1);oldEvent; };
var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
iframeObj.style.height = innerHeight;
var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
iframeObj.style.width = innerWidth;
if( !arguments[1] ) /* 특정 이벤트로 인한 호출시 스크롤을 그냥 둔다. */
this.scrollTo(1,1);
}
</script>
</head>
<body>
<h4>iframe 내 페이지 높이에 맞게 자동 조절하기
</h4>
<iframe name="wsos" id="wsos" src="/webdevdoc/index.php" style="width:100%"
frameborder="0" framespacing="0" scrolling="no" onLoad="resizeFrame(this);"></iframe>
</body>
</html>
|
3. iframe 내 페이지 높이에 맞게 자동 조절하기(서로 다른 도메인)
IE5.5 이후 부터 1차 도메인이 다른 경우는 Script로 원도우의 document 객체 접근시에 보안에러가 발생합니다. 2번의 방법을 사용이 불가능 합니다. 이때는 아래의 방법을 활용하시면 됩니다. 2차 도메인의 경우는 document.domain 을 이용하시면 큰 문제가 없습니다.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/xframe_scripting_security.asp
부모페이지
|
<HTML>
<head>
<body>
<h4>iframe 내 페이지 높이에 맞게 자동 조절하기(서로다른도메인)
</h4>
<iframe name="wsos" id="wsos" src="http://danalysis.wsos.co.kr/info/info.php" style="width:100%;height:1024"
frameborder="0" framespacing="0" scrolling="no"></iframe>
</body>
</html>
|
iframe 페이지
|
<html>
<head>
<script language='JavaScript' type='text/javascript'>
<!--
function init(){
var doc = document.getElementById("infodoc");
doc.style.top=0;
doc.style.left=0;
if(doc.offsetHeight == 0){
} else {
pageheight = doc.offsetHeight;
pagewidth = doc.offsetWidth;
parent.frames["wsos"].resizeTo(pagewidth,pageheight);
}
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="init();">
<div id='infodoc' style="position:absolute;left:0;top:0;width:100%">
~~~~~ 페이지 내용
</div>
</body>
</html> |