iframe高度自适应,自适应子页面高度
html
<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.html"
frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>
js调用
<script type="text/javascript">
startInit('mainFrame', 560);
</script>
js
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1, ] == false);
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var bHeight = 0;
if (isChrome == false && isSafari == false)
bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
else if (isIE == false && isOpera == false)
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
else if (isIE == true && isIE9More) {//ie9+
var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
if (heightDeviation == 0) {
bHeight += 3;
} else if (heightDeviation != 3) {
eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
bHeight += 3;
}
}
else//ie[6-8]、OPERA
bHeight += 3; var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
iframe.style.height = height + "px";
} catch (ex) { }
}
function startInit(iframeId, minHeight) {
eval("window.IE9MoreRealHeight" + iframeId + "=0");
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}
iframe高度自适应,自适应子页面高度的更多相关文章
- 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据
利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...
- 总结iframe高度自适应,自适应子页面高度
在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下. 页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)
最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...
- CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...
- iframe父页面和子页面高度自适应
父页HTML: <iframe id="mainframe" name="mainframe" style="width:100%;&quo ...
- ifame高度自动适应子页面内容
被这个问题折磨了好久,试了很多方法都不行,总算解决了,记录一下. <div class="iframe-pro" id="iframe-proid"> ...
- iframe动态改变内嵌页面高度
test.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...
- 父div高度不能根据子div高度自动变化的解决方案
<div id="parent"> <div id="content"> </div> </div> 当cont ...
- iframe弹出层中关闭包含iframe的div(子页面调用父页面js函数)
父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;" ...
随机推荐
- Fast Scatter-Gather I/O
Some applications may need to read or write data to multiple buffers, which are separated in memory. ...
- 多线程学习-基础(一)Thread和Runnable实现多线程
很久没记录一些技术学习过程了,这周周五的时候偶尔打开“博客园”,忽然让我产生一种重拾记录学习过程的想法,记录下学习研究过程的一点一滴,我相信,慢慢地就进步了!最近想学习一下多线程高并发,但是多线程在实 ...
- Visual Studio2012快捷键总结
(1)如何设置更改快捷键 1.进入工具----选项 对话框 2.选择 环境---->键盘 3.在 [显示命令包含] 下面的对话框中输入“对齐”关键字,然后就会在这个编辑框下面一个文本窗口中显 ...
- JDBC行级锁
行级锁又称为悲观锁 for update 如下(必须要等这个for updaste事务执行完毕以后,剩下的sql语句才可以去执行)
- c# get set 理解
- Git配置代理命令
针对***的代理配置 设置代理 git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.p ...
- VirtualBox 5.0(虚拟机软件)里,安装Fedora遇到的问题!!
问题一: 安装完毕后,重新启动竟然还是进入了Fedora安装过程里. 问题原因:Fedora,并没有处理安装时候加载的ISO文件,依旧让VirtualBox 5.0运行它. 解决方法:在运行Fedor ...
- 【bzoj4800】: [Ceoi2015]Ice Hockey World Championship dfs
[bzoj4800]: [Ceoi2015]Ice Hockey World Championship N<=40所以如果直接dfs背包会TLE 考虑Meet-in-the-middle 如果把 ...
- C#中==与equal的区别
值类型是存储在内存中的堆栈(以后简称栈),而引用类型的变量在栈中仅仅是存储引用类型变量的地址,而其本身则存储在堆中. ==操作比较的是两个变量的值是否相等,对于引用型变量表示的是两个变量在堆中存储的地 ...
- Jmeter-逻辑控制器之Switch控制器(Switch Controller)
Switch控制器(Switch Controller): 作用:Switch控制器通过给该控制器中的Value赋值,来指定运行哪个采样器.有两种赋值方式: 第一种是数值,Switch控制器下的子节点 ...