浏览 41007 次
|
锁定老帖子 主题：最简单的方法实现去iframe滚动条
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-06-29
该文也可以说是一个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>
子页面： <meta content="800px"> 运行原理： 父页面读取子页面中meta的字段值来设置iframe的高度 额外说明： 当iframe 的高度小于内容高度时，如果父窗口的BODY 的overflow:auto，则会出现2个垂直滚动条，iframe的垂直滚动条和父窗口的滚动条； 如果这时，BODY 的overflow:hidden，则只会出现iframe的垂直滚动条，但是，iframe的内容显示不完。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-07-01
总不可能给每个子页面设meta值吧
|
| 返回顶楼 | |
|
发表时间：2008-07-24
css刚刚开始学习！上面的代码不错
|
| 返回顶楼 | |
|
发表时间：2008-10-25
跨域都白扯
不如在父页面 var iframe = document.getElementById(xx); if(iframe) { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; } |
| 返回顶楼 | |
|
发表时间：2008-11-01
scrollHeight
金鑫火 写道 跨域都白扯 不如在父页面 var iframe = document.getElementById(xx); if(iframe) { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; } 你在不同游览器下试一下，看用了是不是大小刚好合适，你就明白我为什么会在每个子页面里面添加指定高度了。 
|
| 返回顶楼 | |
|
发表时间：2008-11-02
金鑫火 写道 跨域都白扯
不如在父页面 var iframe = document.getElementById(xx); if(iframe) { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; } 既然跨域了，iframe.contentWindow.document.body.scrollHeight这样肯定获取不到了 |
| 返回顶楼 | |
|
发表时间：2008-11-02
我记得就算不跨域在chrome下也不可用的，
|
| 返回顶楼 | |
|
发表时间：2008-11-27
看我的解决方案：http://www.iteye.com/topic/281102，不会有滚动条
|
| 返回顶楼 | |
|
发表时间：2008-11-28
caiceclb 写道 看我的解决方案：http://www.iteye.com/topic/281102，不会有滚动条 已拜读过你的文章，简单的说，就是在子页面了面用一个<div id="content"></div> 用和本文一样的方法，获取content标签的高度。 但是height()这个方法，本来就有个问题。如果<div id="content"></div>里面再嵌套了页面，height()获取的高度就有问题了。 就 $(this).height($(this).contents().find("#content").height() + 40); 这句就无法解决问题。 补充一下，我曾经为了解决获取高度，还用过jquery的一个插件，问题依然存在。 |
| 返回顶楼 | |
