jQuery,js实现Iframe自适应高度(兼容多浏览)

最新推荐文章于 2018-06-22 10:22:11 发布

iteye_13003

最新推荐文章于 2018-06-22 10:22:11 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js jQuery 文章标签：乔乐共享 iframe 自适应 jQuery 高度 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82408099

js 同时被 2 个专栏收录

123 篇文章

订阅专栏

jQuery

46 篇文章

订阅专栏

本文介绍两种使用jQuery实现自适应调整iframe高度的方法。第一种方法通过监听iframe加载完成事件，动态调整其高度；第二种方法直接利用iframe的内容高度进行调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 我们在aa.html里面有个iframe，加载内容为bb.html


<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>

[color=red]方式一[/color]


//引入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>

[color=red]方式二[/color]


$("#frame_con").load(function(){
    var thisheight = $(this).contents().find("body").height()+30;
    $(this).height(thisheight < 500 ? 500 : thisheight);
});