自动适应iframe右边的高度
更新时间:2016年12月22日 11:28:17 作者:以茜为贵
在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度。如何解决这一问题呢,下面就跟小编一起来看下吧
在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度。
这时候找到了一个解决方法:
<iframe name="my_iframe" id="mainframe" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="100%" src=""></iframe>
2、记住要引入iframe.js文件
<script type="text/javascript" src="js/iframe.js" ></script>
下面是iframe.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);
}
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
jQuery-serialize()输出序列化form表单值的方法
jQuery-serialize()输出序列化表单值在工作中很常见也很实用,于是本人搜集整理了一些,需要了解的朋友可以详细参考下2012-12-12
jquery检测input checked 控件是否被选中的方法
这篇文章主要介绍了jquery检测input checked 控件是否被选中的方法,需要的朋友可以参考下2014-03-03
解决jQuery uploadify在非IE核心浏览器下无法上传
之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,FireFox 不能正常上传。经过反复研究学习,之所以firefox和360浏览器无法正常运行,是因为FireFox、chrome、360浏览器等支持HTML5的浏览器不会再文件上传时自动带入session信息和cookie,不共享session。2015-08-08


最新评论