欢迎光临
我们一直在努力

表格内容宽度变化iframe高度自适应JS完美解决办法

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

如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求,当内容是未知或者是变化的时候,这个时候下面的代码就有用了。

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>

<script type="text/javascript">

function reinitIframe(){

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

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

console.log(height);

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

</script>

 

赞(0) 打赏
未经允许不得转载:新起点博客 » 表格内容宽度变化iframe高度自适应JS完美解决办法

评论 抢沙发

评论前必须登录!