cross browser iframe auto resize

firefox 3.5 에서 iframe resize 스크립트가 작동하지 않는 문제로 골머릴 썩다 발견한 해결책.

원문 : http://overfloweb.com/zbxe/?mid=study&category=363&document_srl=741

test browser : ie6, ie7, firefox 3, safari 3, chrome, opera 9
...
<iframe id="contentFrame" name="contentFrame" src="about:blank" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
...

...
<div id="content">
... contents ...
</div>
...
<script type="text/javascript">
function init(){
  var doc = document.getElementById('content');
  if(doc.offsetHeight == 0){
  } else {
  pageheight = doc.offsetHeight;
  parent.document.getElementById("contentFrame").height = pageheight+"px";
  }
}
window.onload = function(){
  init();
}
</script>
...



iframe 안의 소스에서 내용이 들어가는 전체를 <div id="content"></div> 로 감싸고,

onload 이벤트로 그 div 의 dom.offsetHeight 를 구해서 parent.iframe 의 height 를 바꿔주는 방식이다.
붉은색으로 표시된 height 가 크로스 브라우징의 핵심이다.
겨우 height 가 핵심이냐고? 모르는 소리다.

clientHeight, scrollheight,innerHeight, 등등 모두 크로스브라우징은 안된다. 하지만 그냥 height 는 된다.

2009/11/16 12:23 2009/11/16 12:23
Trackback Address:이 글에는 트랙백을 보낼 수 없습니다
  1. Blog Icon
    thisgun

    감사합니다. 안되는 문제를 이거보고 해결했어요 ^^

  2. Blog Icon
    이진영

    좋은소스가 아닙니다.
    크로스브라우징이 되지 않습니다.