IFrame跨域高度自適應實現代碼
2024-05-06 14:21:23
供稿：網友
代碼如下:
var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe'];
var iframehide = "yes";
function dynIframeSize(){
var dyniframe = [];
for(var i=0;i<iframeids.length;i++){
if(!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)
window.attachEvent("onload", dynIframeSize)
else {
window.onload = dynIframeSize;
}
對于上面的代碼直接保存一個文件iframe.js，然后引用即可
注意：這段代碼對于跨域的iframe引用不太適用，需要特別定義其iframe高度
下面這個代碼是跨域的iframe高度
項目網站中需要嵌入合作網站的頁面，這就需要頁面的自適應高度變化，并且是跨域的。在網上看了許多資料，加上自己的實踐，終于實現了跨域的IFrame自適應高度。如下：
首先，我的頁面a.html需要引入對方的b.html,在這里運用iframe方式實現頁面的套用
a.html頁面的主要代碼如下：
代碼如下:
<BODY>
<iframe width="100%" id="a_iframe" name="a_iframe" src="http://對方域名/b.html"
frameborder="no" border="0px" scrolling="no" allowtransparency="yes" ></iframe>
</BODY>
a.html頁面只是用來引入對方頁面的一個簡單頁面 這就不多做介紹。
然后，最好在a.html同一級目錄下，創建一個agent.html頁面，該頁面用來得到對方通過js傳遞過來的參數，
根據高度參數來調整a.html中的a_iframe的高度，主要代碼如下：
Js代碼
代碼如下:
<script type="text/javascript">
//得到a.html中的a_iframe
var a_iframe = parent.parent.document.getElementById("a_iframe");
//<SPAN>location.hash用來獲取頁面的標簽值</SPAN>
，這個值通過b.html中的js函數改變。包括height屬性
var hash_url = window.location.hash;
//得到b.html傳遞過來的height屬性
var hash_height = hash_url.split("#")[1]+"px";
//調整a_iframe的height，達到自適應
a_iframe.height = hash_height;
</script>
最后，對方的頁面(b.html),讓對方在b.html中加入以下javascript代碼
代碼如下:
<iframe id="b_iframe" width="100%" src="http://我的域名/../agent.html" style="display:none">
