JS实现iframe⾃适应⾼度的⽅法⽰例
本⽂实例讲述了JS实现iframe⾃适应⾼度的⽅法。
JS⾃适应⾼度，其实就是设置iframe的⾼度，使其等于内嵌⽹页的⾼度，从⽽看不出来滚动条和嵌套痕迹。对于⽤户体验和⽹站美观起着重要作⽤。如果内容是固定的，那么我们可以通过CSS来给它直接定义⼀个⾼度，同样可以实现上⾯的需求。当内容是未知或者是变化的时候。这个时候⼜有⼏种情况了。
iframe内容未知，⾼度可预测
这个时候，我们可以给它添加⼀个默认的CSS的min-height值，然后同时使⽤JavaScript改变⾼度。常⽤的兼容代码有：
// document.domain = "caibaojian";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = tWindow || tDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
ElementById('external-frame'));
};
演⽰地址（如果在同个顶级域名下，不同⼦域名之间互通信息，设置document.domain="caibaojian" 只要修改以上的iframe的ID即可了。或者你可以直接在iframe⾥⾯写代码，我们⼀般为了不污染HTML代码，建议使⽤上⾯的代码。
<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
多个iframe的情况下
<script language="javascript">
//输⼊你希望根据页⾯⾼度⾃动调整⾼度的iframe的名称的列表
//⽤逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有⼀个窗体，则不⽤逗号。
//定义iframe的ID
var iframeids=["test"];
//如果⽤户的浏览器不⽀持iframe是否将iframe隐藏 yes 表⽰隐藏，no表⽰不隐藏
var iframehide="yes";
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (ElementById)
{
//⾃动调整iframe⾼度
dyniframe[dyniframe.length] = ElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display="block";
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果⽤户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果⽤户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
iframe嵌套页面加载慢}
}
//根据设定的参数来处理不⽀持iframe的浏览器的显⽰问题
if ((document.all || ElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : ElementById(iframeids[i]);
tempobj.style.display="block";
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false);
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize);
else
</script>
针对知道的iframe的ID调⽤
function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.tDocument.body.offsetHeight);},200) }
内容宽度变化的iframe⾼度⾃适应
<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = ElementById("test");
try{
var bHeight = tWindow.document.body.scrollHeight;
var dHeight = tWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
打开调试运⾏窗⼝可以看到运⾏。
跨域下的iframe⾃适应⾼度
跨域的时候，由于js的同源策略，⽗页⾯内的js不能获取到iframe页⾯的⾼度。需要⼀个页⾯来做代理。⽅法如下：假设www.a下的⼀个页⾯a.html要包含www.b下的⼀个页⾯c.html。我们使⽤www.a下的另⼀个页⾯agent.html来做代理，通过它获取iframe页⾯的⾼度，并设定iframe元素的⾼度。 a.html中包含iframe:
<iframe src="www.b/c.html" id="Iframe" frameborder="0" scrolling="no" ></iframe>
在c.html中加⼊如下代码：
<iframe id="c_iframe"  height="0" width="0"  src="www.a/agent.html" ></iframe>
<script type="text/javascript">
(function autoHeight(){
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = ElementById("c_iframe");
c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这⾥通过hash传递b.htm的宽⾼
})();
</script>
最后，agent.html中放⼊⼀段js:
<script type="text/javascript">
var b_iframe = window.parent.ElementById("Iframe");
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
}
</script>
agent.html从URL中获得宽度值和⾼度值，并设置iframe的⾼度和宽度（因为agent.html在www.a下，所以操作a.html时不受JavaScript的
同源限制）
分享给⼤家供⼤家参考，具体如下：
<iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="0" >
</iframe>
<script type="text/javascript" language="javascript">
function reinitIframe(){
var iframe = ElementById("mainFrame");
try{
var bHeight = tWindow.document.body.scrollHeight;
var dHeight = tWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 100);
</script>
PS:⾼度⾃适应应⽤⼴泛，本站的很多在线⼯具也使⽤了这⼀技巧，列举如下⼏个⼯具供⼤家参考：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。