WEB开发网
开发学院网页设计JavaScript 最简单的方法去掉iframe滚动条 阅读

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

 2010-09-14 13:07:57 来源:WEB开发网   
核心提示:该文也可以说是一个iframe自适应大小的折中解决办法,iframe出现滚动条的原因是,最简单的方法去掉iframe滚动条,body里面的内容的高度大于了iframe的高度,所以会出现滚动条,则只会出现iframe的垂直滚动条,但是,解决办法:采用Jquery从iframe嵌套的页面中获取一个高度值,在iframe的父

该文也可以说是一个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的内容显示不完。

Tags:简单 方法 去掉

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接