建站代码网

热门标签

jquery实现Iframe高度自适应(兼容多浏览)

在实际项目中,很多地方可能由于历史原因不得不去使用iframe,从而再次开发的工作量!
随之而来的就是在实际使用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); });