龙空技术网

Iframe根据子页面内容高度自适应

前端似锦 550

前言:

此时你们对“css onload”大致比较关怀,姐妹们都需要知道一些“css onload”的相关内容。那么小编在网上搜集了一些关于“css onload””的相关文章,希望我们能喜欢,小伙伴们快快来了解一下吧!

自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。用户体验更好和网站美观。

如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度。当内容是未知或者是变化的时候。这个时候就得更具子页面的高度来调节iframe的高,使得满足应该户的需求。

我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度。代码如下:

<iframe id="myiframe" name="myiframe" src="h_default.html" onload="iframeLoad()" scrolling="no" width="100%" height=""></iframe>

<script type="text/javascript">

function iframeLoad() {

var iframe = document.getElementById("myiframe");

var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;

if(iframe) {

iframe.height = iframeWin.document.body.scroll;

if(iframeWin.document.body)

iframe.height = iframeWin.document.documentElement.scrollHeight;

}

}

//window.setInterval("iframeLoad()", 20);

</script>

标签: #css onload