iframe高度自適應、載入完成事件
高度自適應
-------------------------------------------------
方法一:
經典程式碼 iFrame 自適應高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過測試。
只適用於同域下,不能跨域。
Js程式碼-
<iframe src="http://127.0.0.1:8080/HC1/zhuanpan.htm" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" height="1000" onLoad="iFrameHeight()"
- <script type="text/javascript" language="javascript">
- //經典程式碼 iFrame 自適應高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過測試。
- function iFrameHeight() {
- var ifm= document.getElementById("iframepage");
-
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
- if(ifm != null && subWeb != null) {
- ifm.height = subWeb.body.scrollHeight;
- }
- }
- </script
方法二:
只適用於同域下,不能跨域。
Js程式碼- <script language="javascript" type="text/javascript">
- //** iframe自動適應頁面 **//
- //輸入你希望根據頁面高度自動調整高度的iframe的名稱的列表
-
//用逗號把每個iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一個窗體,則不用逗號。
- //定義iframe的ID
- var iframeids=["ifm"]
- //如果使用者的瀏覽器不支援iframe是否將iframe隱藏 yes 表示隱藏,no表示不隱藏
- var iframehide="yes"
- function dyniframesize()
- {
- var dyniframe=new Array()
- for (i=0; i<iframeids.length; i++)
- {
- if (document.getElementById)
- {
- //自動調整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;
- }
- }
- //根據設定的引數來處理不支援iframe的瀏覽器的顯示問題
- 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
- </script>
- <iframe src="http://127.0.0.1:8080/HC1/zhuanpan.htm" frameBorder=0 width="100%" scrolling="auto" id="ifm" name="ifm" ></iframe>
載入完成事件
-------------------------------------------------------------------
經常會遇到這樣一種情況。
在iframe裡嵌入另外一個頁面時。如果iframe載入的頁面響應較快,或許我們感覺不到頁面載入的不同步,但試想,如果一個需要內嵌到iframe裡的頁面的響應很慢,這裡會出現一種什麼現象呢?這時將會出現所有頁面已經載入完成,但在iframe元素處,將會出現空白,直到內嵌頁面完成載入時,該空白處才會顯示新載入的頁面。
可想而知,一個頁面如果長時間的空白,對於瀏覽者來說將意味著什麼。
如果在內嵌頁面未載入完成時,給出一種載入提示資訊。如:“頁面載入中”之類的,我想這對瀏覽頁面使用者來講,將不再是煎熬,更是一種視覺上的享受。
為了實現這樣的效果,一般會採用如下原理處理。
·iframe載入區域給出友好的提示資訊。
·當iframe載入完成時,清空提示資訊,而讓iframe顯示。
這些都比較容易,但現在的問題的關鍵是怎麼監聽iframe元素內的頁面已經載入完成。
關鍵這個問題,一般來講,會分兩種情況的來討論解決方案。
·同域的巢狀。最好是讓子頁面呼叫父頁面的方法。
·如果是異域,但子頁面無法修改,那麼:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通過定時器測定子頁面的document.readyState,或者使用iframe onreadystatechange事件計算該事件的響應。
1.同域巢狀。
parent.html
function ifrmLoaded() {
// code here
}
sub.html
window.onload = function() {
window.parent.ifrmLoaded();
}
有時候,為了防止自己的頁面不被別人巢狀,可以採用如下方式解決:
if(window.parent!=window) window.parent.location="http://hqlong.com";
//or
if(window.top!=window) window.top.location="http://hqlong.com";
2.巢狀頁面不能修改,或者異域巢狀。
2.1 Firefox/Opera/Safari中直接使用iframe onload事件
document.getElementById('ifrm').onload = function() {
//here doc
}
2.2 在IE下,定時器測document.readyState或者註冊iframe onreadystatechange事件
2.2.1 使用定時器
var oFrm = document.getElementById('ifrm');
var fmState=function(){
var state=null;
if(document.readyState){
try{
state=oFrm.document.readyState;
}catch(e){state=null;}
if(state=="complete" || !state) {
onComplete();
return;
}
window.setTimeout(fmState,10);
}
};
//在改變src或者通過form target提交表單時,執行語句:
if(fmState.TimeoutInt) window.clearTimeout(fmState.timeoutInt);
fmState.timeoutInt = window.setTimeout(fmState,400);
2.2.2 使用iframe onreadystatechange事件
var oFrm = document.getElementById('ifrm');
oFrm.onreadystatechange = function() {
if (this.readyState && this.readyState == 'complete') {
onComplete();
}
}
每當iframe載入頁面,過程內會啟用onreadystatechange事件三次,相應的狀態分別是loading,interactive和complete,而最後一次才是complete.
3. 相容Firefox/Opera/Safari/IE的處理方式。
var oFrm = document.getElementById('ifrm');
oFrm.onload = oFrm.onreadystatechange = function() {
if (this.readyState && this.readyState != 'complete') return;
else {
onComplete();
}