自適應(yīng)高度浮驳，其實(shí)就是設(shè)置iframe的高度悍汛，使其等于內(nèi)嵌網(wǎng)頁(yè)的高度，從而看不出來(lái)滾動(dòng)條和嵌套痕跡至会。對(duì)于用戶體驗(yàn)和網(wǎng)站美觀起著重要作用离咐。
如果內(nèi)容是固定的，那么我們可以通過(guò)CSS來(lái)給它直接定義一個(gè)高度奉件，同樣可以實(shí)現(xiàn)上面的需求宵蛀。當(dāng)內(nèi)容是未知或者是變化的時(shí)候。這個(gè)時(shí)候又有幾種情況了县貌。
iframe內(nèi)容未知术陶，高度可預(yù)測(cè)
這個(gè)時(shí)候，我們可以給它添加一個(gè)默認(rèn)的CSS的min-height值煤痕，然后同時(shí)使用JavaScript改變高度梧宫。常用的兼容代碼有：
// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
如果在同個(gè)頂級(jí)域名下接谨，不同子域名之間互通信息，設(shè)置document.domain="caibaojian.com"·
只要修改以上的iframe的ID即可了塘匣∨Ш溃或者你可以直接在iframe里面寫代碼，我們一般為了不污染HTML代碼忌卤，建議使用上面的代碼扫夜。
//輸入你希望根據(jù)頁(yè)面高度自動(dòng)調(diào)整高度的iframe的名稱的列表
//用逗號(hào)把每個(gè)iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個(gè)窗體驰徊，則不用逗號(hào)笤闯。
//定義iframe的ID
var iframeids=["test"];
//如果用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏
var iframehide="yes";
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i
{
if (document.getElementById)
{
//自動(dòng)調(diào)整iframe高度
dyniframe[dyniframe.length] = document.getElementById(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;
}
}
//根據(jù)設(shè)定的參數(shù)來(lái)處理不支持iframe的瀏覽器的顯示問(wèn)題
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;
function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
打開調(diào)試運(yùn)行窗口可以看到運(yùn)行棍厂。
跨域的時(shí)候颗味，由于js的同源策略，父頁(yè)面內(nèi)的js不能獲取到iframe頁(yè)面的高度勋桶。需要一個(gè)頁(yè)面來(lái)做代理脱衙。
方法如下：假設(shè)www.a.com下的一個(gè)頁(yè)面a.html要包含www.b.com下的一個(gè)頁(yè)面c.html。
我們使用www.a.com下的另一個(gè)頁(yè)面agent.html來(lái)做代理例驹，通過(guò)它獲取iframe頁(yè)面的高度，并設(shè)定iframe元素的高度退唠。
a.html中包含iframe:
在c.html中加入如下代碼：
//code from http://caibaojian.com/iframe-adjust-content-height.html
(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 = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height; ?// 這里通過(guò)hash傳遞b.htm的寬高
})();
最后鹃锈，agent.html中放入一段js:
var b_iframe = window.parent.parent.document.getElementById("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;
}
agent.html從URL中獲得寬度值和高度值，并設(shè)置iframe的高度和寬度（因?yàn)閍gent.html在www.a.com下瞧预，所以操作a.html時(shí)不受JavaScript的同源限制）
