怎么让动态的 iframe 高度自适应里面内容
来源:互联网 发布:敖龙女 捏脸数据 ff14 编辑:程序博客网 时间:2024/05/01 20:18
这里加载了两个不同内容高度的页面至iframe中
1. 没有设置高度
<div class="iframe-wrapper"> <iframe name="iframe1" src="iframe1.html" frameborder="0" width="100%"></iframe> <iframe name="iframe2" src="iframe2.html" frameborder="0" width="100%"></iframe> </div>
默认长这样
有滚动条,可以看到iframe并不会因为内容高度自动撑开
2. 显示地设置高度
<div class="iframe-wrapper"> <iframe name="iframe1" src="iframe1.html" frameborder="0" width="100%" height="300px"></iframe> <iframe name="iframe2" src="iframe2.html" frameborder="0" width="100%" height="300px"></iframe> </div>
内容长这样,但可以看到,高度定死了,没有自适应
3. 在onload事件触发时,根据body的高度自适应iframe的高度
<div class="iframe-wrapper"> <iframe name="iframe1" onload="this.height=this.contentWindow.document.body.scrollHeight" src="iframe1.html" frameborder="0" width="100%"></iframe> <iframe name="iframe2" onload="this.height=iframe2.document.body.scrollHeight" src="iframe2.html" frameborder="0" width="100%"></iframe> </div>
注意到这里的 this.contentWindow 其实就类似与下方的 name值对应的iframe2,两种引用方式是等价的
可以发现,高度虽然能自适应,不过只支持高度了“从小到大”的自适应
如iframe2的内容比iframe1的高,后者动态加载出前者能自适应,但前者动态加载出后者就不行了,这种高度减小不了
最后的解决办法是
4. 在onload事件中动态设置高度为body高度之前,先将原高度还原为auto或空值
可以用setTimeout(fn,0)将高度设置放到下一轮事件循环中执行,或者在 onbeforeunload 事件中先把高度设置为auto
setTimeout
var iframes = document.getElementsByTagName('iframe'); for (var i = 0, j = iframes.length; i < j; ++i) { // 放在闭包中,防止iframe触发load事件的时候下标不匹配 (function(_i) { iframes[_i].onload = function() { // 提前还原高度 this.setAttribute('height', 'auto'); // 或设为'' // 再在下一轮事件循环中设置新高度 setTimeout(function() { iframes[_i].setAttribute('height', iframes[_i].contentWindow.document.body.scrollHeight); }, 0); } })(i); }
onbeforeunload
var iframes = document.getElementsByTagName('iframe'); for (var i = 0, j = iframes.length; i < j; ++i) { // 放在闭包中,防止iframe触发load事件的时候下标不匹配 (function(_i) { iframes[_i].onload = function() { this.contentWindow.onbeforeunload = function() { iframes[_i].setAttribute('height', 'auto'); }; this.setAttribute('height', this.contentWindow.document.body.scrollHeight); }; })(i); }
基本ok了,不过偶尔(可能是电脑卡了?)会看到些抖动闪动的情况
5. 要避免这个情况,可暂时将它隐藏
先设置display为none,再设置为block;或者先设置visibility为hidden,再设置为visible 。 用visibility看起来变化地更自然一点
setTimeout
var iframes = document.getElementsByTagName('iframe'); for (var i = 0, j = iframes.length; i < j; ++i) { // 放在闭包中,防止iframe触发load事件的时候下标不匹配 (function(_i) { iframes[_i].onload = function() { this.style.visibility = 'hidden'; // this.style.display = 'none'; // 提前还原高度 this.setAttribute('height', 'auto'); // 或设为'' // 再在下一轮事件循环中设置新高度 setTimeout(function() { iframes[_i].setAttribute('height', iframes[_i].contentWindow.document.body.scrollHeight); iframes[_i].style.visibility = 'visible'; // iframes[_i].style.display = 'block'; }, 0); } })(i); }
onbeforeunload
var iframes = document.getElementsByTagName('iframe'); for (var i = 0, j = iframes.length; i < j; ++i) { // 放在闭包中,防止iframe触发load事件的时候下标不匹配 (function(_i) { iframes[_i].onload = function() { this.contentWindow.onbeforeunload = function() { iframes[_i].style.visibility = 'hidden'; // iframes[_i].style.display = 'none'; iframes[_i].setAttribute('height', 'auto'); }; this.setAttribute('height', this.contentWindow.document.body.scrollHeight); this.style.visibility = 'visible'; // this.style.display = 'block'; }; })(i); }
阅读全文
1 0
- 怎么让动态的 iframe 高度自适应里面内容
- iframe里面内容高度自适应
- iframe 自适应高度,更改内容时iframe高度怎么根据新的内容高度自动改变
- 如何让iframe框架自适应内容高度
- iframe 自适应内容高度
- iframe 自适应内容高度
- iframe高度自适应内容
- iframe高度自适应内容
- IFrame自适应内容高度
- 让IFRAME自适应高度
- 让Iframe自适应高度
- 让Iframe自适应高度
- 让Iframe自适应高度
- 让Iframe自适应高度
- 让Iframe自适应高度
- 让Iframe自适应高度
- 让iframe高度自适应
- 让iframe高度自适应
- python:Process、join()、进程的创建Process子类、进程池Pool、将一个文件夹的内容copy到另一个文件夹
- Linux下的eval以及和$(),``
- 百练_2687:数组逆序重放
- Lintcode 空格替换
- hyperledger fabric交易流程
- 怎么让动态的 iframe 高度自适应里面内容
- 1.删除一个无头单链表的非尾节点 2.从尾到头打印单链表
- angular4.0 ERROR Error: Uncaught (in promise): Error: No provider for AuthGuard! Error: No provider
- 【Java入门】错误集锦 7.18
- C#调用C++动态链接库之Win32dll(函数)、MFCdll(对话框)
- vue和angular区别?
- StarUML2 全平台破解方法
- 主成份分析(PCA)——原理、实现步骤
- mysql 慢日志