WEB前端培訓(xùn)之iframe高度自適應(yīng)、載入完成事件

WEB前端培訓(xùn)之iframe高度自適應(yīng)、載入完成事件

高度自適應(yīng)
-------------------------------------------------
方法一：
經(jīng)典代碼 iFrame 自適應(yīng)高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過測(cè)試。 
只適用于同域下，不能跨域。
 
Js代碼  
 
 
方法二：
只適用于同域下，不能跨域。
Js代碼  
 
 
載入完成事件
-------------------------------------------------------------------
經(jīng)常會(huì)遇到這樣一種情況。
在iframe里嵌入另外一個(gè)頁(yè)面時(shí)。如果iframe載入的頁(yè)面響應(yīng)較快，或許我們感覺不到頁(yè)面載入的不同步，但試想，如果一個(gè)需要內(nèi)嵌到iframe里的頁(yè)面的響應(yīng)很慢，這里會(huì)出現(xiàn)一種什么現(xiàn)象呢？這時(shí)將會(huì)出現(xiàn)所有頁(yè)面已經(jīng)載入完成，但在iframe元素處，將會(huì)出現(xiàn)空白，直到內(nèi)嵌頁(yè)面完成載入時(shí)，該空白處才會(huì)顯示新載入的頁(yè)面。
可想而知，一個(gè)頁(yè)面如果長(zhǎng)時(shí)間的空白，對(duì)于瀏覽者來(lái)說將意味著什么。
如果在內(nèi)嵌頁(yè)面未載入完成時(shí)，給出一種加載提示信息。如：“頁(yè)面加載中”之類的，我想這對(duì)瀏覽頁(yè)面用戶來(lái)講，將不再是煎熬，更是一種視覺上的享受。
為了實(shí)現(xiàn)這樣的效果，一般會(huì)采用如下原理處理。
·iframe載入?yún)^(qū)域給出友好的提示信息。
·當(dāng)iframe載入完成時(shí)，清空提示信息，而讓iframe顯示。
這些都比較容易，但現(xiàn)在的問題的關(guān)鍵是怎么監(jiān)聽iframe元素內(nèi)的頁(yè)面已經(jīng)載入完成。
關(guān)鍵這個(gè)問題，一般來(lái)講，會(huì)分兩種情況的來(lái)討論解決方案。
·同域的嵌套。最好是讓子頁(yè)面調(diào)用父頁(yè)面的方法。
·如果是異域，但子頁(yè)面無(wú)法修改，那么：在Firefox/Opera/Safari中，可以直接使用iframe onload事件；而在IE中，可以通過定時(shí)器測(cè)定子頁(yè)面的document.readyState，或者使用iframe onreadystatechange事件計(jì)算該事件的響應(yīng)。
1.同域嵌套。
parent.html
function ifrmLoaded() {
        // code here
}
sub.html
window.onload = function() {
        window.parent.ifrmLoaded();
}
有時(shí)候，為了防止自己的頁(yè)面不被別人嵌套，可以采用如下方式解決：
if(window.parent!=window) window.parent.location="http://hqlong.com";
//or
if(window.top!=window) window.top.location="http://hqlong.com";
2.嵌套頁(yè)面不能修改，或者異域嵌套。
2.1 Firefox/Opera/Safari中直接使用iframe onload事件
document.getElementById('ifrm').onload = function() {
        //here doc
}
2.2 在IE下，定時(shí)器測(cè)document.readyState或者注冊(cè)iframe onreadystatechange事件
2.2.1 使用定時(shí)器
var oFrm = document.getElementById('ifrm');
var fmState=function(){
        var state=null;
        if(document.readyState){
               try{
                       state=oFrm.document.readyState;
               }catch(e){state=null;}
               if(state=="complete" || !state) {
                       onComplete();
                       return;
               }
               window.setTimeout(fmState,10);
        }
};
//在改變src或者通過form target提交表單時(shí)，執(zhí)行語(yǔ)句：
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() {
        if (this.readyState && this.readyState == 'complete') {
               onComplete();
        }
}
每當(dāng)iframe加載頁(yè)面，過程內(nèi)會(huì)激活onreadystatechange事件三次，相應(yīng)的狀態(tài)分別是loading,interactive和complete，而最后一次才是complete.
3. 兼容Firefox/Opera/Safari/IE的處理方式。
var oFrm = document.getElementById('ifrm');
oFrm.onload = oFrm.onreadystatechange = function() {
     if (this.readyState && this.readyState != 'complete') return;
     else {
         onComplete();
     }  
本文版權(quán)歸傳智播客web前端開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：傳智播客web前端培訓(xùn)學(xué)院；
首發(fā)：http://www.xamj520.com/web/