摘要:如果在內嵌頁面未載入完成時,給出一種加載提示信息。載入區域給出友好的提示信息當載入完成時,清空提示信息,而讓顯示這些都比較容易,但現在的問題的關鍵是怎么監聽元素內的頁面已經載入完成。
經常會遇到這樣一種情景:
在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、修改
http://hqlong.com/2009/02/620...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50523.html
摘要:如果在內嵌頁面未載入完成時,給出一種加載提示信息。載入區域給出友好的提示信息當載入完成時,清空提示信息,而讓顯示這些都比較容易,但現在的問題的關鍵是怎么監聽元素內的頁面已經載入完成。 經常會遇到這樣一種情景: 在iframe里嵌入另外一個頁面時。如果iframe載入的頁面響應較快,或許我們感覺不到頁面載入的不同步,但試想,如果一個需要內嵌到iframe里的頁面的響應很慢,這里會出現...
摘要:今天,你的瀏覽器滾動了嗎序在頁面中,一個有高度或者寬度的容器是最常見的構成元素,而在其中的子元素有很大的概率超過父容器的尺寸限制,我們稱之為溢出。 今天,你的瀏覽器 滾動 了嗎? 序 在 Web 頁面中,一個有高度或者寬度的容器是最常見的構成元素,而在其中的子元素有很大的概率超過父容器的尺寸限制,我們稱之為溢出。而應對溢出,隱藏或者滾動是最常見的處理方式。滾動,作為 FEers 最經常...
摘要:今天,你的瀏覽器滾動了嗎序在頁面中,一個有高度或者寬度的容器是最常見的構成元素,而在其中的子元素有很大的概率超過父容器的尺寸限制,我們稱之為溢出。 今天,你的瀏覽器 滾動 了嗎? 序 在 Web 頁面中,一個有高度或者寬度的容器是最常見的構成元素,而在其中的子元素有很大的概率超過父容器的尺寸限制,我們稱之為溢出。而應對溢出,隱藏或者滾動是最常見的處理方式。滾動,作為 FEers 最經常...
閱讀 1612·2019-08-29 13:53
閱讀 3211·2019-08-29 13:50
閱讀 854·2019-08-27 10:51
閱讀 566·2019-08-26 18:36
閱讀 1797·2019-08-26 11:00
閱讀 604·2019-08-26 10:36
閱讀 3217·2019-08-23 17:58
閱讀 2032·2019-08-23 15:17