摘要:使用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 id="form" src="form.html"></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<iframeids.length; 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.onload=dyniframesize; }
iframe
<iframe id="survey_1" src="survey_1.html"></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 id="survey_2" src="survey_2.html"></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 id="survey_2" src="survey_2.html"></iframe>
【注意】
这些方法只能对 iframe 加载的是同域名下的页面设置高度自适应,如果加载的是跨域页面,这些高度自适应设置方法不起作用。