IFrame跨域高度自適應實作程式碼_javascript技巧

複製程式碼

複製程式碼

如下程式碼：


var iframeids = ['memberIndexIameina','frameyhame','frm'hamey',' ];
var iframehide = "是";
函數 dynIframeSize(){
var dyniframe = [];
for(var i=0;iif(!document.getElementById) return false;
dyniframe[i] = document.getElementById(iframeids[i]);
if(dyniframe[i] && !window.opera){
dyniframe[i].style.display = "block";
if(dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight){
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
}else if(dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight){
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
if((document.all || document.getElement) && iframeids == "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)
windowelse if (window.attach .attachEvent("onload", dynIframeSize)

else {
window.onload = dynIframeSize;
}


對於上面的程式碼直接儲存一個檔案iframe.js，然後引用即可注意：be程式碼對於跨域的iframe引用不太適用，特別是定義其iframe高度


下面這個程式碼是跨域的iframe高度


專案網站中嵌入合作網站的頁面，這就需要頁面的自適應高度變化，而且是跨域的。 b.html，這裡運用iframe方式實現頁面的套用

a.html頁面的主要代碼如下：複製代碼

代碼如下：


;

身體>


a.html頁面只是為了引入對方頁面的一個簡單頁面的做一下介紹。 >然後，最好在a.html相同等級目錄下，建立一個代理程式。 ，主要程式碼如下：
Js程式碼

複製程式碼程式碼如下：

程式碼如下：



//取得a.html中的a_iframe
var a_iframe =parent.parent.document.getElementById("a_iframe");
//location.hash用來取得頁面的標籤值
，這個值透過b.html中的js函數改變。 .哈希；
//取得b.html傳遞過來的height屬性
var hash_height = hash_url.split("#")[1] "px";
//調整a_iframe的高度，達到自適應

a_iframe.height = hash_height;
腳本>

最後，對方的頁面(b.html),請對方在b.html加入以下javascript程式碼 複製程式碼

程式碼如下：