iframe與window.onload如何使用詳解

發(fā)布時間：2020-05-07 15:59:10 作者：Caeser110

這篇文章主要介紹了iframe與window.onload如何使用詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

在項目上，需要等頁面加載完之后再執(zhí)行一個方法用于修改頁面的顏色，于是導出都是在使用onload解決，然而這并不能解決我遇到的問題，因為我發(fā)現(xiàn)，我項目上的頁面仍然沒加載，折騰了很久才知道，原來是因為項目使用了很古老的iframe來操作的，必須等iframe加載完之后才能執(zhí)行方法，原因分析完了，接下來我再說說，傳統(tǒng)的，原生JS是如何使用onload的。

網(wǎng)上很常見的方法

<script type="text/javascript">
window.onload=function(){
    document.getElementById("bg").style.backgroundColor="#F00";
}
</script>

解釋：window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執(zhí)行。

還有一種寫法是

<body  οnlοad="loadBody()">
<div ></div>
<script type="text/javascript">
    console.log("load ......  body  javascript  ");
 
    window.οnlοad=function(){
        console.log("load ......  body window javascript ");
    }
</script>
</body>

解釋：等待body加載完成，就會執(zhí)行l(wèi)oadBody()方法。在window和dom之后執(zhí)行，總是最后執(zhí)行。這里的onload函數(shù)會覆蓋window.onload

上述內容并不能解決我的問題，于是我去查我不是很想用的jQuery的方法：$(document).ready，想著能不能用原生JS實現(xiàn)該方法

function ready(fn){
 if(document.addEventListener){  //標準瀏覽器
  document.addEventListener('DOMContentLoaded',function(){
   //注銷時間，避免重復觸發(fā)
   document.removeEventListener('DOMContentLoaded',arguments.callee,false);
   fn();  //運行函數(shù)
  },false);
 }else if(document.attachEvent){  //IE瀏覽器
  document.attachEvent('onreadystatechange',function(){
   if(document.readyState=='complete'){
    document.detachEvent('onreadystatechange',arguments.callee);
    fn();  //函數(shù)運行
   }
  });
 }
}

但是我發(fā)現(xiàn)我的項目上并沒有任何變化，依然不能用在項目上，這我就發(fā)愁了，我突然想到，項目上用的iframe于是就去搜了一下。

什么是iframe

HTML內聯(lián)框架元素 (<iframe>) 表示嵌套的browsing context。它能夠將另一個HTML頁面嵌入到當前頁面中。每個嵌入的瀏覽上下文（embedded browsing context）都有自己的會話歷史記錄(session history)和DOM樹。包含嵌入內容的瀏覽上下文稱為父級瀏覽上下文。頂級瀏覽上下文（沒有父級）通常是由 Window 對象表示的瀏覽器窗口。

iframe 的頁面和父頁面（parent）是分開的，所以它意味著，這是一個獨立的區(qū)域，不受 parent 的 CSS 或者全局的 JavaScript 的影響。

主要優(yōu)勢：
（1）網(wǎng)頁編輯器（WYSIWYG Online HTML Editor），因為它們需要 reset 自己的 CSS 到自己的標準，而不被 parent CSS 的 override。
（2）沙箱隔離。
（3）需要保持獨立焦點和歷史管理的子窗口，如復雜的Web應用。

缺點：
（1）樣式/腳本需要額外鏈入，會增加請求。
（2）iframe好在能夠把原先的網(wǎng)頁全部原封不動顯示下來,但是如果用在首頁,是搜索引擎最討厭的。
（3）iframe的創(chuàng)建比其它包括scripts和css的 DOM 元素的創(chuàng)建慢了 1-2 個數(shù)量級。
（4）iframe會阻塞主頁面的Onload事件

好了，說了這么多利弊，還是需要看具體項目來解決項目上的問題，那么怎么解決onload呢？

// 頁面加載時判斷frameObj是否加載
window.onload = function(){  
 var frameObj= document.getElementById("frameID");
 // 如果已加載則執(zhí)行方法
 if (frameObj.attachEvent){// IE
        frameObj.attachEvent("onload", function(){
            yourfunction();
        });
    }else {
        // 非IE
        frameObj.onload = function(){
            yourfunction();
        };
}};

這段代碼有兩點比較重要，首先是需要使用window.onload并且你需要知道attachEvent方法

寫了這么久的代碼，還是把IE放在了考慮范圍內，畢竟是Windws 內核，不想刪掉就隱藏吧，最近在寫前端代碼的時候，發(fā)現(xiàn)如果項目本來沒有使用jQuery，就一直不使用jQuery，代碼比較整潔，而且加上新出的vue、react都有自己不錯的封裝思路，于是我寫習慣了$這個dollar符終于可以不用了。

總結

以前總是很懶得寫前端代碼，寫標簽呀寫JS呀，都覺得又繁瑣又沒有意思，可能是因為學校里學的都是Java、C/C++這種，邏輯性很強，于是在前端的學習上，就慢了很多，慢了不知道好幾拍。當自己想寫一份前后端都很優(yōu)雅，很華麗的代碼的時候，就發(fā)現(xiàn)，只會后端是不夠的，代碼寫出來要么很丑，要么前后交互很潦草，于是也就拿不出手了。最近嘔心瀝血寫了一份代碼，還在潤色當中，而且申請的域名可算是通過了，這里有一個大坑，就是，很久之前我在國內進行過備案，當時因為還是學生，就在學校所在地申請了備案號，結果現(xiàn)在想換又覺得麻煩，于是總是填錯，今天通知我審核通過了，下一步就是聯(lián)網(wǎng)備案，聽說是又多了一步，慢慢走流程吧！

到此這篇關于iframe與window.onload如何使用詳解的文章就介紹到這了,更多相關iframe與window.onload內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！