【代码】iframe嵌入页面自适应目标页面的高度

文章目录

1. 方案一
2. 方案二

今天在给用户做一个布局时遇到一个问题，当使用html5的iframe标签做页面嵌入动作时，页面的搞定没有办法设置为源页面的搞定，这可是一个头疼的问题，不显示滚动条吧内容显示不全，如果显示严重影响美观，最后翻看了html5关于iframe的文档，但是官方并没有满足该要求的属性，没办法只用用js做一个动态调用了。下面我们就来看看如何用js来搞定这个问题的。

方案一

这个是在网上查找到的教程，用的JavaScript来获取源页面的高度然后赋值给iframe标签中的heaght元素实现自使用高度。

代码

1. <!--html代码  在代码中需要添加一个 onload="iFrameHeight();" 参数用来获取高度值   还有一个 id="iframe" 让js识别-->
2. <iframe src="../chenxing.html" id="iframe" frameborder="0" scrolling="no" onload="iFrameHeight();" width="100%"></iframe>
3. <!--js代码 放置到页面body标签中即可-->
4. function iFrameHeight() {
5.     var ifm = document.getElementById("iframe");
6.     var subWeb = document.frames ? document.frames["iframe"].document : ifm.contentDocument;
7.     if (ifm != null && subWeb != null) {
8.          ifm.height = subWeb.body.scrollHeight;
9.     }
10. }

优点：

1. 无需加载jQuery库简单易操作；

缺点：

1. 需要判断浏览器的高度，处理逻辑稍有复杂；

方案二

使用jQuery的方式实现，现在大多数网站都是基于jQuery开发的，一般都调用了jQuery库，所以用这个方法非常实用，而且用jQuery实现比JavaScript性能要好。

引用页面放置以下代码

1. //注意：下面的代码是放在iframe引用的子页面中调用
2. $(window.parent.document).find("#iframe").load(function(){
3. var main = $(window.parent.document).find("#iframe");
4. var thisheight = $(document).height()+30;
5. main.height(thisheight);
6. });

目标页面放置代码

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

这个方法布置代码比较难，要改两个页面，但是性能好，所以大家仔细甄选看看那个适合自己使用。

来源：本文由晨星博客原创撰写，欢迎分享本文，转载请保留出处和链接！

 4 收藏

分享：