今天小编给大家分享一下js如何控制Iframe高度自适应的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来
今天小编给大家分享一下js如何控制Iframe高度自适应的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
方法一：js控制Iframe 高度自适应
这个方法之前一直都在用，没有问题，但最新发现有些情况不行（具体原因不清楚）
//window.setInterval("iframeHeightAuto()", 200);
function setIframeHeight(iframeId){
var cwin = document.getElementById(iframeId);
if(document.getElementById){
if(cwin && !window.opera){
if(cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
cwin.height = cwin.contentDocument.body.offsetHeight;//FF NS
console.log("FF NS cwin.height=" +cwin.height);
}else if(cwin.Document && cwin.Document.body.scrollHeight){
cwin.height = cwin.Document.body.scrollHeight;//IE
console.log("IE cwin.height=" +cwin.height);
}
}else if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight){
cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
}
}
console.log("cwin.height=" + cwin.height);
};方法二：html代码控制
在方法一不生效的时候，使用了方法二。
头部的html不需要任何的声明，都去掉，如下面代码所示：
<html>
<head>
<meta charset="UTF-8">
<title>iframe高度自适应</title>
</head>
<body>
<div class="mt20">
<iframe id="mapiframe" border="0" frameborder="0" scrolling="no"
width="100%" height="100%" style="padding: 0;margin: 0;" ></iframe>
</div>
<script type="text/javascript" src="../js/Jquery-3.4.1.min.js"></script>
</body>
</html>上面如果能自适应，就不需要下面的；如果上面还不自适应，需要设置
1、body样式中的 overflow: hidden; 绝对不对省略；
2、Iframe 中的 height='100%' 以及 滚动条不能设为no(默认是yes，不用设置即可)
方法三：同样是js控制（未验证）
原理：
Iframe页面的内容利用一个<div id="iframeContent">进行包裹，div会自适应内部高度，因此，可以通过div实现子页面高度的获取。
Iframe页面
<body>
<div id="iframeContent">
...
</div>
<body>父页面（嵌入Iframe的页面）增加js：
//跨域或子页面无"iframeContent"则高度不能自适应
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var height = iframe.contentWindow.document.getElementById("iframeContent").offsetHeight;
if (!height) {
height = minHeight;
}
if (height < minHeight) {
height = minHeight;
}
iframe.style.height = height + "px";
} catch (e) {
iframe.style.height = minHeight + "px";
}
}方法四：同样是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) {
try {
bHeight = iframe.contentWindow.document.body.scrollHeight;
} catch (ex) {
}
}
var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐浏览器高度不断增加删除+2
else if (isIE == false && isOpera == false && iframe.contentWindow) {
try {
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
} catch (ex) {
}
}
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;
//alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
iframe.style.height = height + "px";
} catch (ex) { }
}
//定时任务
function startInit(iframeId, minHeight) {
eval("window.IE9MoreRealHeight" + iframeId + "=0");
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}以上就是“js如何控制Iframe高度自适应”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网VUE频道。
--结束END--
本文标题: js如何控制Iframe高度自适应
本文链接: https://lsjlt.com/news/93606.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0