`

依据子页面的内容让iframe高度自适应

 
阅读更多
<div id="support_content" style='overflow:hidden;'>
   <iframe scrolling="no" id='sup_ctx_iframe' name='sup_ctx_iframe' marginwidth='0' style='overflow:hidden;' marginheight='0' width='100%' frameborder='no' border='0' src='' onload="setIframeHeight();"></iframe>
</div>


 function setIframeHeight() {
       var iframe = document.getElementById('sup_ctx_iframe');
       // 获取子页面的高度
       var height = window.frames["sup_ctx_iframe"].document.getElementsByTagName("body")[0].clientHeight;
        if(iframe)
        {
             if (undefined != iframe.ownerDocument
				&& undefined != iframe.ownerDocument.body.offsetHeight) {
                    iframe.height = height;
		}
	}
}


这样每当iframe加载的时候会调用该js方法,从而实现iframe高度自适应不出现滚动条。
当然如果这个iframe是被嵌入一个div里面的,那么这个div的样式需要设置一下:

.content{
	height:auto !important;
	height: 500px;
	min-height: 500px;
}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics