首頁技術(shù)文章正文

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

更新時(shí)間:2017-05-24 來源:黑馬程序員web前端培訓(xùn)學(xué)院 瀏覽量:

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

高度自適應(yīng)
-------------------------------------------------
方法一:
經(jīng)典代碼 iFrame 自適應(yīng)高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過測試。 
只適用于同域下,不能跨域。
 
Js代碼  
  1. <iframe src="http://127.0.0.1:8080/HC1/zhuanpan.htm" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" height="1000" onLoad="iFrameHeight()" ></iframe>   
  2. <script type="text/javascript" language="javascript">   
  3. //經(jīng)典代碼 iFrame 自適應(yīng)高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過測試。   
  4. function iFrameHeight() {   
  5. var ifm= document.getElementById("iframepage");   
  6. var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
  7. if(ifm != null && subWeb != null) {   
  8. ifm.height = subWeb.body.scrollHeight;   
  9. }   
  10. }   
  11. </script  
 
 
方法二:
只適用于同域下,不能跨域。
Js代碼  
  1. <script language="javascript" type="text/javascript">   
  2. //** iframe自動適應(yīng)頁面 **//  
  3.   
  4. //輸入你希望根據(jù)頁面高度自動調(diào)整高度的iframe的名稱的列表  
  5. //用逗號把每個(gè)iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一個(gè)窗體,則不用逗號。  
  6.   
  7. //定義iframe的ID  
  8. var iframeids=["ifm"]  
  9.   
  10. //如果用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏,no表示不隱藏  
  11. var iframehide="yes"  
  12.   
  13. function dyniframesize()   
  14. {  
  15. var dyniframe=new Array()  
  16. for (i=0; i<iframeids.length; i++)  
  17. {  
  18.       if (document.getElementById)  
  19. {  
  20. //自動調(diào)整iframe高度  
  21. dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);  
  22. if (dyniframe[i] && !window.opera)  
  23. {  
  24. //dyniframe[i].style.display="block"  
  25. if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用戶的瀏覽器是NetScape  
  26. dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;   
  27. else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用戶的瀏覽器是IE  
  28. dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;  
  29. }  
  30. }  
  31. //根據(jù)設(shè)定的參數(shù)來處理不支持iframe的瀏覽器的顯示問題  
  32. if ((document.all || document.getElementById) && iframehide=="no")  
  33. {  
  34. var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])  
  35. tempobj.style.display="block"  
  36. }  
  37. }  
  38. }  
  39.   
  40. if (window.addEventListener)  
  41. window.addEventListener("load", dyniframesize, false)  
  42. else if (window.attachEvent)  
  43. window.attachEvent("onload", dyniframesize)  
  44. else  
  45. window.onload=dyniframesize  
  46. </script>   
  47. <iframe src="http://127.0.0.1:8080/HC1/zhuanpan.htm" frameBorder=0 width="100%" scrolling="auto" id="ifm" name="ifm" ></iframe>   
 
 
載入完成事件
-------------------------------------------------------------------
經(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)。
1.同域嵌套。
parent.html
function ifrmLoaded() {
        // code here
}
sub.html
window.onload = function() {
        window.parent.ifrmLoaded();
}
有時(shí)候,為了防止自己的頁面不被別人嵌套,可以采用如下方式解決:
if(window.parent!=window) window.parent.location="http://hqlong.com";
//or
if(window.top!=window) window.top.location="http://hqlong.com";
2.嵌套頁面不能修改,或者異域嵌套。
2.1 Firefox/Opera/Safari中直接使用iframe onload事件
document.getElementById('ifrm').onload = function() {
        //here doc
}
2.2 IE下,定時(shí)器測document.readyState或者注冊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í)行語句:
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 &amp;&amp; this.readyState == 'complete') {
               onComplete();
        }
}
每當(dāng)iframe加載頁面,過程內(nèi)會激活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 &amp;&amp; this.readyState != 'complete') return;
     else {
         onComplete();
     }
 
 
本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處,謝謝!
作者:黑馬程序員web前端培訓(xùn)學(xué)院;
首發(fā):http://www.itcast.cn/web/ 
分享到:
在線咨詢 我要報(bào)名
和我們在線交談!