首頁 > web前端 > js教程 > IFrame跨域高度自適應實作程式碼_javascript技巧

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

WBOY
發布: 2016-05-16 17:50:41
原創
1035 人瀏覽過
複製程式碼


如下程式碼:


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程式碼 複製程式碼

程式碼如下:


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板