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

資訊專欄INFORMATION COLUMN

iframe載入完成時(shí)的事件監(jiān)聽與雙滾動條問題

liuhh / 2329人閱讀

摘要:如果在內(nèi)嵌頁面未載入完成時(shí),給出一種加載提示信息。載入?yún)^(qū)域給出友好的提示信息當(dāng)載入完成時(shí),清空提示信息,而讓顯示這些都比較容易,但現(xiàn)在的問題的關(guān)鍵是怎么監(jiān)聽元素內(nèi)的頁面已經(jīng)載入完成。

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

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

為了實(shí)現(xiàn)這樣的效果,一般會采用如下原理處理。

iframe載入?yún)^(qū)域給出友好的提示信息

當(dāng)iframe載入完成時(shí),清空提示信息,而讓iframe顯示

這些都比較容易,但現(xiàn)在的問題的關(guān)鍵是怎么監(jiān)聽iframe元素內(nèi)的頁面已經(jīng)載入完成。
關(guān)鍵這個(gè)問題,一般來講,會分兩種情況的來討論解決方案。

同域的嵌套。最好是讓子頁面調(diào)用父頁面的方法

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

同域嵌套
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();
     }
}
雙滾動條問題
因?yàn)閕frame默認(rèn)是inline-block元素,空白符被解析,所以無端端出現(xiàn)滾動條
使用iframe時(shí),一般會出現(xiàn)雙滾動條問題,解決方案如下:

1、修改