2008-06-29

最简单的方法实现去iframe滚动条

关键字: iframe 滚动条 jquery 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>

子页面： 
<meta content="800px">


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

额外说明：
当iframe 的高度小于内容高度时，如果父窗口的BODY 的overflow:auto，则会出现2个垂直滚动条，iframe的垂直滚动条和父窗口的滚动条；
如果这时，BODY 的overflow:hidden，则只会出现iframe的垂直滚动条，但是，iframe的内容显示不完。
评论
sunfengcheng 2008-07-24
css刚刚开始学习！上面的代码不错
ayeah 2008-07-01
总不可能给每个子页面设meta值吧
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

wangsong76
搜索本博客
最近加入圈子
存档
最新评论