iframe載入完成時的事件監聽

經常會遇到這樣一種情況。

在iframe裡嵌入另外乙個頁面時。如果iframe載入的頁面響應較快，或許我們感覺不到頁面載入的不同步，但試想，如果乙個需要內嵌到iframe 裡的頁面的響應很慢，這裡會出現一種什麼現象呢？這時將會出現所有頁面已經載入完成，但在iframe元素處，將會出現空白，直到內嵌頁面完成載入時，該空白處才會顯示新載入的頁面。

可想而知，乙個頁面如果長時間的空白，對於瀏覽者來說將意味著什麼。

如果在內嵌頁面未載入完成時，給出一種載入提示資訊。如：「頁面載入中」之類的，我想這對瀏覽頁面使用者來講，將不再是煎熬，更是一種視覺上的享受。

為了實現這樣的效果，一般會採用如下原理處理。

·iframe載入區域給出友好的提示資訊。

·當iframe載入完成時，清空提示資訊，而讓iframe顯示。

這些都比較容易，但現在的問題的關鍵是怎麼監聽iframe元素內的頁面已經載入完成。

關鍵這個問題，一般來講，會分兩種情況的來討論解決方案。

·同域的巢狀。最好是讓子頁面呼叫父頁面的方法。

·如果是異域，但子頁面無法修改，那麼：在firefox/opera/safari中，可以直接使用iframe onload事件；而在ie中，可以通過定時器測定子頁面的document.readystate，或者使用iframe onreadystatechange事件計算該事件的響應。

1.同域巢狀。

parent.html

function
ifrmloaded(
)

sub.html

window.onload
=function()

有時候，為了防止自己的頁面不被別人巢狀，可以採用如下方式解決：

if
(window.parent
!=window)
window.parent
.location
="";//orif(
window.top
!=window)
window.top
.location
="";

2.巢狀頁面不能修改，或者異域巢狀。

2.1 firefox/opera/safari中直接使用iframe onload事件

document.getelementbyid
('ifrm'
).onload
=function()

2.2 在ie下，定時器測document.readystate或者註冊iframe onreadystatechange事件

2.2.1 使用定時器

var
ofrm =
document.getelementbyid
('ifrm');
var fmstate=
function()
catch(e)
if(state==
"complete"||!
state)
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()
}

每當iframe載入頁面，過程內會啟用onreadystatechange事件三次，相應的狀態分別是loading,interactive和complete，而最後一次才是complete.

3. 相容firefox/opera/safari/ie的處理方式。

var
ofrm =
document.getelementbyid
('ifrm');
ofrm.onload
= ofrm.onreadystatechange
=function()

參考資料:

iframe載入完成時的事件監聽

iframe載入完成時的事件監聽

判斷iframe是否載入完成

JQuery 頁面載入時觸發ready 事件

iframe載入完成時的事件監聽

iframe載入完成時的事件監聽

判斷iframe是否載入完成

JQuery 頁面載入時觸發ready 事件

相關推薦