iframe載入完成時的事件監聽

2021-08-25 15:03:43 字數 2525 閱讀 9078

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

在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載入的頁面響應較快,或許我們感覺不到頁面載入的不同步,但試想,如果乙個需要內嵌到iframe裡的頁面的響應很慢,這裡會出現一種什麼現象呢?這時將會出現所有頁面已經載入完成,但在iframe元素處,將會出現空白,直到內嵌頁面完成載入時,該空白處才會顯...

判斷iframe是否載入完成

1.var iframe document.getelementbyid iframenews if iframe.attachevent ie iframe.attachevent onload function else ff chrome等 iframe.onload function loa...

JQuery 頁面載入時觸發ready 事件

從現在開始進入jquery的事件和應用了!好了,言歸正傳!ready 類似於onload 但ready 只要頁面的dom結構 文件結構 載入後便觸發!不包括等非文字 檔案.onload 需要頁面的全部元素載入完後才觸發!ready 的使用方式有以下幾種.法一 document ready funct...