js html高度自适应,js实现高度iframe高度自适应的4种方法【亲测有效】

摘要：使用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 加载的是同域名下的页面设置高度自适应，如果加载的是跨域页面，这些高度自适应设置方法不起作用。