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

最新推荐文章于 2024-06-05 15:02:26 发布

转载最新推荐文章于 2024-06-05 15:02:26 发布 · 8.1k 阅读

文章标签：

#iframe #jquery #html

jQuery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种通过jQuery实现的iframe自适应高度的方法，避免iframe因内容过多而出现滚动条。该方法通过从子页面中读取特定的meta标签内容，并在父页面中设置iframe的高度。

该文也可以说是一个iframe自适应大小的折中解决办法。iframe出现滚动条的原因是，body里面的内容的高度大于了iframe的高度，所以会出现滚动条。解决办法：采用Jquery从iframe嵌套的页面中获取一个高度值，在iframe的父窗口中的onload事件中更新iframe的高度。具体实现代码：父页面： <mce:script type="text/javascript"></mce:script> <body style="overflow:auto;" mce_style="overflow:auto;"> <iframe id="myiframe" src="xx.html" mce_src="xx.html" onLoad="SetCwinHeight()"></iframe> </body> <mce:script type="text/javascript"></mce:script> <body style="overflow:auto;" mce_style="overflow:auto;"><iframe id="myiframe" src="xx.html" mce_src="xx.html" ></iframe></body></html> 子页面： Html代码 <meta content="800px"> 运行原理：父页面读取子页面中meta的字段值来设置iframe的高度额外说明：当iframe 的高度小于内容高度时，如果父窗口的BODY 的overflow:auto，则会出现2个垂直滚动条，iframe的垂直滚动条和父窗口的滚动条；如果这时，BODY 的overflow:hidden，则只会出现iframe的垂直滚动条，但是，iframe的内容显示不完。原文链接：http://edu.codepub.com/2009/0416/3006.php