随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便。于是自动调整iframe的高度就成了重点。
飞信空间引入了强大的jQuery,所以我索性用了jQuery来实现根域相同情况下iframe的高度自适应。
HTML主页面之iframe代码如下,注意加ID:
<iframe id="frame_con" src="bb.html" frameborder=0 scrolling=no style="margin-left:0px;margin-top:-3px;width:785px;height:550px;float:right;"></iframe>
bb.html中JS代码如下:
//引入jQuery
<script src="http://res.func.fetionpictest.com/js/public/jquery-1.3.2.min.js?2011122701" type="text/javascript"></script>
<script type="text/javascript">
//document.domain = "fx-func.com";//指向根域
$(window.parent.document).find("#frame_con").load(function(){//绑定事件
var main = $(window.parent.document).find("#frame_con");//找到iframe对象
var thisheight = $(document).height()+30;//获取页面高度
main.height(thisheight < 500 ? 500 : thisheight);//为iframe高度赋值如果高度小于500,则等于500,反之不限高,自适应
});
</script>
另一种方法就是把JS放到页面aa.html,既和iframe同样页面
$("#frame_con").load(function(){
var thisheight = $(this).contents().find("body").height()+30;
$(this).height(thisheight < 500 ? 500 : thisheight);
});
热门信息
阅读 (107)
1 ASP+AJAX实现分页效果[Z]阅读 (107)
2 用ASP删除文件阅读 (106)
3 [jQuery1.9]Cannot read property ‘msie’ of undefined错误的解决方法阅读 (106)
4 ASP 微信公共平台接口实现代码阅读 (105)
5 提高IIS+ASP网站安全性的方法