如何控制 iframe根据内容自适应子页面自适应高度

点击联系发帖人 时间：2017-06-03 10:58

iframe根据内容自适应

在网上找了很多iframe根据内容自适应嘚高度自适应发现很多兼容性都不是很好，于是自己总结了一下

子页面html节点上要有下面红色部分，不然ie浏览器会无限递增

3、测试时注意：将代码发布到服务器上后有的浏览器高度才会自动增减，因为在本地浏览的时候因为浏览器权限/webpagedesign/6.html

更新兼容IE11自动高度

修复ie9+浏览器高度會自动增加

修复以新版google为内核的浏览器（如360安全浏览器）高度增加后不自动缩减问题

51楼网友回复提供了一个解决方案，可以参考

页面的頁面内容都是利用一个<div class="content">进行包裹div会自适应内部高度，因此可以通过div实现子页面高度的获取：

接着修改主页面js，如下：

//或者在这里改成樓主的reinitiframe根据内容自适应方法使得子页面即使没有"main_content"也具有一定的自适应能力

以下为55楼评论提供可以参考

在chrome上测试，在跳转前利用
后有时候依旧存在打开一个较高网页后跳转较矮网页高度不会自动收缩的问题。
后此时页面并未跳转，定时器方法reinitiframe根据内容自适应根据未跳转頁面重设iframe根据内容自适应高度此时子页面的<body>高度被设置为iframe根据内容自适应高度，导致子页面高度不会自动收缩
解决办法是在父页面跳轉iframe根据内容自适应前停止定时方法，在跳转后重设测试后没有再出现问题。如下：
 //在iframe根据内容自适应页面地址更改前将iframe根据内容自适應高度设置为minheight，清除上一个子页面高度的影响google内核浏览器的高度才会自动缩减
但是，本方法依旧存在三个问题：
2.本方法通过定时器不停設定iframe根据内容自适应高度会有性能上的问题
3.iframe根据内容自适应子页面内网页跳转依旧可能存在高度无法自动收缩的问题
第一个问题跨域，若是可以加入代理页面的域还可以利用代理页面的方式获取子页面内容但其他域则并没有很好的解决方法。
第二个问题在性能方面的經测试损耗较小，可以接受；除此之外也没有找到什么更好的方法
接着修改主页面js，如下：
 //或者在这里改成楼主的reinitiframe根据内容自适应方法使得子页面即使没有"main_content"也具有一定的自适应能力

}

同域直接在内页就绪时获取body高度來通讯处理
不同域的话在内页就绪时植入一个与父页面同域的页面P通过js把高度放入P的url，P.parent.parent即可与最外层的父页面通讯

}

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

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

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

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

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

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

}

天天发财游戏网