서비의 다락방

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

...
<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 는 된다.