您的位置：首页 > 其它

最简单的方法去掉iframe滚动条

2011-04-22 11:50 246 查看

该文也可以说是一个iframe自适应大小的折中解决办法。iframe出现滚动条的原因是，body里面的内容的高度大于了iframe的高度，所以会出现滚动条。

解决办法：

采用Jquery从iframe嵌套的页面中获取一个高度值，在iframe的父窗口中的onload事件中更新iframe的高度。

具体实现代码：

父页面：

<script type="text/javascript">
function SetCwinHeight(){
var H=$("#myiframe").contents().find("meta").attr("content");
alert(H);
$("#myiframe2").height(H);
}
</script>

<body style="overflow:auto;">
<iframe id="myiframe" src="xx.html" onLoad="SetCwinHeight()"></iframe>
</body>
<script type="text/javascript">
function SetCwinHeight(){
var H=$("#myiframe").contents().find("meta").attr("content");
alert(H);
$("#myiframe2").height(H);
}
</script>
<body style="overflow:auto;"><iframe id="myiframe" src="xx.html" ></iframe></body></html>

子页面：
Html代码

<meta content="800px">

运行原理：父页面读取子页面中meta的字段值来设置iframe的高度

额外说明：
当iframe 的高度小于内容高度时，如果父窗口的BODY 的overflow:auto，则会出现2个垂直滚动条，iframe的垂直滚动条和父窗口的滚动条；
如果这时，BODY 的overflow:hidden，则只会出现iframe的垂直滚动条，但是，iframe的内容显示不完。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航