国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

iframe載入完成時的事件監聽與雙滾動條問題

liuhh / 2316人閱讀

摘要:如果在內嵌頁面未載入完成時,給出一種加載提示信息。載入區域給出友好的提示信息當載入完成時,清空提示信息,而讓顯示這些都比較容易,但現在的問題的關鍵是怎么監聽元素內的頁面已經載入完成。

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

可想而知,一個頁面如果長時間的空白,對于瀏覽者來說將意味著什么。
如果在內嵌頁面未載入完成時,給出一種加載提示信息。如:“頁面加載中”之類的,我想這對瀏覽頁面用戶來講,將不再是煎熬,更是一種視覺上的享受。

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

iframe載入區域給出友好的提示信息

當iframe載入完成時,清空提示信息,而讓iframe顯示

這些都比較容易,但現在的問題的關鍵是怎么監聽iframe元素內的頁面已經載入完成。
關鍵這個問題,一般來講,會分兩種情況的來討論解決方案。

同域的嵌套。最好是讓子頁面調用父頁面的方法

如果是異域,但子頁面無法修改,那么:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通過定時器測定子頁面的document.readyState,或者使用iframe onreadystatechange事件計算該事件的響應

同域嵌套
parent.html

function ifrmLoaded() {
    // code here
}
sub.html

window.onload = function() {
    window.parent.ifrmLoaded();
}
嵌套頁面不能修改,或者異域嵌套

Firefox/Opera/Safari中直接使用iframe onload事件

document.getElementById("ifrm").onload = function() {
    //here doc
}

在IE下,注冊iframe onreadystatechange事件

var oFrm = document.getElementById("ifrm");
oFrm.onreadystatechange = function() {
    if (this.readyState && this.readyState == "complete") {
        onComplete();
    }
}
兼容Firefox/Opera/Safari/IE的處理方式
var oFrm = document.getElementById("ifrm");
oFrm.onload = oFrm.onreadystatechange = function() {
     if (this.readyState && this.readyState != "complete") return;
     else {
         onComplete();
     }
}
雙滾動條問題
因為iframe默認是inline-block元素,空白符被解析,所以無端端出現滾動條
使用iframe時,一般會出現雙滾動條問題,解決方案如下:

1、修改