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
원문 : 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 는 된다.
Trackback Address:http://www.yunsobi.com/blog/trackback/511