前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery 实现iframe 自适应高度

jquery 实现iframe 自适应高度

作者头像
李维亮
发布2021-07-09 15:27:41
2.5K0
发布2021-07-09 15:27:41
举报
文章被收录于专栏:李维亮的博客李维亮的博客

超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。 注意别放错地方了哦。

iframe代码,注意要写ID

代码语言:javascript
复制
<iframe id="main" src="test.html" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代码1:

//注意:下面的代码是放在test.html调用

代码语言:javascript
复制
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});

jquery代码2:

//注意:下面的代码是放在和iframe同一个页面调用

代码语言:javascript
复制
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-10-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档