jquery实现iframe自适应高度

最新推荐文章于 2016-12-19 15:36:10 发布

my_baby_2009

最新推荐文章于 2016-12-19 15:36:10 发布

阅读量977

点赞数

分类专栏： Javascript相关

Javascript相关专栏收录该内容

99 篇文章

订阅专栏

本文介绍两种使用jQuery实现iframe自适应高度的方法。通过调整iframe的高度来适应其内容的变化，确保页面布局更加灵活且用户体验更好。

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

iframe因为能和网页无缝结合，所以可以不刷新页面更新页面的部分数据。
可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行。
分享2种使用jquery实现iframe 自适应高度的代码

iframe代码，注意要写ID。

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代码一：

//注意：下面的代码是放在test.html调用 
$(window.parent.document).find("#main").load(function(){ 
var main = $(window.parent.document).find("#main"); 
var thisheight = $(document).height()+30; www.jbxue.com
main.height(thisheight); 
});

jquery代码二：

//注意：下面的代码是放在和iframe同一个页面调用 
$("#main").load(function(){ 
var mainheight = $(this).contents().find("body").height()+30; 
$(this).height(mainheight); 
});