摘要:使用iframe放置嵌套页面如虽然可以通过css来设置固定高度,但如果页面的高度不能确定或者高度会变化在用css来设置高度就有点不太方便了,如果能够让iframe的高度自适应的话就可以不用担心这个问题了。
使用 iframe 放置嵌套页面如虽然可以通过 css 来设置固定高度,但如果页面的高度不能确定或者高度会变化在用 css 来设置高度就有点不太方便了,如果能够让 iframe 的高度自适应的话就可以不用担心这个问题了。
通过 js 设置 iframe 高度自适应的方法还是挺多的,这里心月博主整理了4种比较好用的设置 iframe 高度自适应的方法。
第一种设置 iframe 高度自适应的方法:
设置高度自适应的 js 代码function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
console.log(iframeWin)
if (iframeWin.document.body) {
console.log(iframeWin.document.documentElement.scrollHeight)
console.log(iframeWin.document.body.scrollHeight)
iframe.style.height = (iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight) + 'px';
console.log(iframe.style.height)
}
}
};
window.onload = function () {
setIframeHeight(document.getElementById('form'));
};
iframe
第二种设置 iframe 高度自适应的方法:
可以同时给多个 iframe 设置高度自适应
设置高度自适应的 js 代码// iframe组 只需把需要设置高度自适应的iframe的id放入 iframeids 数组中
var iframeids=["survey_1"];
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var iframehide="yes";
function dyniframesize(){
var dyniframe=new Array()
for (i=0; i
if (document.getElementById){
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera){
dyniframe[i].style.display="block";
console.log(dyniframe[i].contentDocument)
console.log(dyniframe[i].contentDocument.body.offsetHeight)
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight){
dyniframe[i].style.height = (dyniframe[i].contentDocument.body.offsetHeight + 40) + 'px';
}else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight){
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
tempobj.style.display="block";
}
}
}
}
if (window.addEventListener){
window.addEventListener("load", dyniframesize, false);
}else if (window.attachEvent){
window.attachEvent("onload", dyniframesize);
}else{
window.οnlοad=dyniframesize;
}
iframe
第三种设置 iframe 高度自适应的方法:
设置高度自适应的 js 代码function iframeAutoFit(iframeObj){
console.log(iframeObj)
setTimeout(function(){
console.log(iframeObj)
if(!iframeObj) return;
iframeObj.style.height=((iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight) + 50)+ 'px';
},200)
}
window.onload = function () {
iframeAutoFit(document.getElementById("survey_2"));
};
iframe
第四种设置 iframe 高度自适应的方法:
设置高度自适应的 js 代码function reinitIframe(val){
var iframe = document.getElementById(val);
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.style.height = height + 'px';
}catch (ex){}
}
window.onload = function () {
var id = 'survey_2';
reinitIframe(id);
};
iframe
【注意】
这些方法只能对 iframe 加载的是同域名下的页面设置高度自适应,如果加载的是跨域页面,这些高度自适应设置方法不起作用。