vue项目内嵌iframe,iframe如何自适应高度
- 一、直接上代码(google版本的)
- 上面代码只处理了google,其他几个浏览器可以自行参考一下
一、直接上代码(google版本的)
<iframe
id="iframeContainer"
src="/static/iframePhone/html/main.html"
style="width: 600px; height: 80px"
></iframe>
setInterval(() => {
this.reInitIframe('iframeContainer', 70) //dom更新后开始重置iframe,加计时器是为了等待iframe中js完全加载完再重新计算iframe
}, 300)
// 重新设置iframe大小,只处理了google
reInitIframe(iframeId, minHeight) {
try {
let iframe = document.getElementById(iframeId)
let bHeight = 0
bHeight = iframe.contentWindow.document.body.scrollHeight
let height = Math.max(bHeight, minHeight) + 10
iframe.style.height = height + 'px'
} catch (ex) {}
},
上面代码只处理了google,其他几个浏览器可以自行参考一下
// 重新设置iframe大小
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";
// console.info("iframe rehight");
} catch (ex) { }
}
function maxSizeIframe(iframeId, minHeight) {
//eval("window.IE9MoreRealHeight" + iframeId + "=0");
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 300);
}
maxSizeIframe("mainFrame", 500)
结束啦!!!!!!!