반응형

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>



[다른 서버(사이트)의 페이지를 삽입하는 경우]


  1. 물론 다른사이트의 페이지 내용을 수정할수(관리권한이) 있어야 한다.

<부모페이지>
<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>


출처: http://horangi.tistory.com/4


반응형
,