-
iframe 자동 사이즈 조절웹프로그래밍/자바스크립트 2007. 12. 20. 19:22반응형
iframe에 삽입되는 내용에 따라 iframe의 사이즈가 자동으로 변경되는 소스.
두가지의 조건
1. 같은 서버내의 페이지를 iframe으로 삽입하는 경우.
2. 타 사이트의 페이지를 iframe으로 삽입하는 경우.
[같은 서버내의 페이지를 삽입하는 경우]
1. 부모페이지에서 해결하는 방법
<SCRIPT LANGUAGE="JavaScript">
<!--
function resizeIframe(fr) {
fr.setExpression('height',aaa.document.body.scrollHeight);
fr.setExpression('width',aaa.document.body.scrollWidth);
}
//-->
</SCRIPT>
<iframe frameborder="0" id="aaa" scrolling="no" src="xxx.htm" width=650 onload="resizeIframe(this)"></iframe>
2. iframe으로 삽입되는 페이지에서 해결하는 방법
아이프레임으로 삽입되는 페이지의 최하단에 아래내용 삽입
<script>
document.body.scrollIntoView(true);
parent.document.all.aaa.height = document.body.scrollHeight;
</script>
부모페이지의 아이프레임 id를 aaa로 맞춤.
<IFRAME id=aaa src="xxx.htm" frameBorder=0 width=0 scrolling=no height=0></IFRAME>
[다른 서버(사이트)의 페이지를 삽입하는 경우]
- 물론 다른사이트의 페이지 내용을 수정할수(관리권한이) 있어야 한다.
<부모페이지>
<iframe src="http://www.aaa.com/aaa.htm" frameborder="0" id="aaa" scrolling="no"></iframe>
<타서버 불려올 페이지(http://www.aaa.com/aaa.htm)>
<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["aaa"].resizeTo(pagewidth,pageheight);
}
}
//-->
</script>
body의 onLoad태그로 위 스크립트를 불러옴
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init();">
본문내용을 지정한 id로 감싼다.(infodoc)
<div id='infodoc'>
.
.
.
내용
.
.
.
</div>
</body>반응형'웹프로그래밍 > 자바스크립트' 카테고리의 다른 글
일정시간 경과후 스크립트 실행(타이머) (0) 2008.01.01 윈도우창 위치이동 (0) 2007.12.26 윈도우 크기변경 (0) 2007.12.26 새창열기 (0) 2007.12.26 버튼 클릭으로 소스 복사하기 (2) 2007.12.19