让动态的 iframe 内容高度自适应
使用iframe加载其他页面的时候,需要自适应iframe的高度
这里加载了两个不同内容高度的页面至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);
}
让动态的 iframe 内容高度自适应的更多相关文章
- iframe的高度自适应
http://www.cnblogs.com/snandy/p/3902337.html http://www.cnblogs.com/snandy/p/3900016.html Snandy Sto ...
- 同域iframe的高度自适应
引子 父页面里控制子页面 子页面里控制父页面 一.引子 我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 1.html <!DOCTYPE html ...
- 跨域iframe的高度自适应
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...
- 动态替换iframe的src及动态改变iframe的高度
实现效果:点击左侧右侧内容变化,但左侧保持不变(如折叠等) 动态替换iframe的src <iframe width="100%" frameBorder="0&q ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- WPF设置DataGrid行内容高度自适应 与 TextBox/TextBlock内容高度自适应
WPF设置DataGrid行内容高度自适应 TextBox/TextBlock内容高度自适应 参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ...
- js动态改变iframe的高度
js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%" height="200" ...
- 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应
总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...
- 实现iframe窗口高度自适应的又一个巧妙思路
domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少 ...
随机推荐
- Remote Desktop Connection Manager
通过Remote Desktop Connection Manager(RDCMan),当前最新版本是 v2.7. 通过这款软件,我们便可以轻松的管理和访问数个RDP.左边的列表中我们可以创建总的分区 ...
- ASP.NET MVC 5 入门指南汇总
经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章.其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章言简意赅,篇幅适中,从一个web网站示例开始讲解 ...
- 关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)
网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...
- 磁盘分区在windows和linux下的表现形式对比
写在前面的话:磁盘分区在windows下面比较好理解,在linux下会有挂载的概念,理解起来比较难,但是可以通过与windows对比,以一种通俗的方式将他们梳理清楚. ====正文开始==== 我们的 ...
- .NET 的 Debug 和 Release build 对执行速度的影响
这篇文章发布于我的 github 博客:原文 在真正开始讨论之前先定义一下 Scope. 本文讨论的范围限于执行速度,内存占用什么的不在评估的范围之内. 本文不讨论算法:编译器带来的优化基本上属于底层 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (46) ------ 第八章 POCO之领域对象测试和仓储测试
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-8 测试领域对象 问题 你想为领域对象创建单元测试. 这主要用于,测试特定的数 ...
- VS2013的 Browser Link 引起的问题
环境:vs2013 问题:在调用一个WebApi的时候出现了错误: 于是我用Fiddler 4直接调用这个WebApi,状态码是200(正常的),JSon里却提示在位置9409处文本非法, 以Text ...
- 在JS中获取文件点之后的后缀字符
var upFileName = $("#fileToUpload").val();var index1=upFileName.lastIndexOf(".") ...
- hibernate学习笔记之三 持久化的三种状态
Hibernate持久化对象有3中状态,瞬时对象(transientObjects),持久化对象(persistentObjects),离线对象(detachedObjects) 下图显示持久化三种状 ...