HTML5網頁中iframe與window.onload如何使用詳解

佚名發表於2020-05-21

文章主要介紹了iframe與window.onload如何使用詳解,文中透過示例程式碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧。

前言

在專案上,需要等頁面載入完之後再執行一個方法用於修改頁面的顏色,於是匯出都是在使用onload解決,然而這並不能解決我遇到的問題,因為我發現,我專案上的頁面仍然沒載入,折騰了很久才知道,原來是因為專案使用了很古老的iframe來操作的,必須等iframe載入完之後才能執行方法,原因分析完了,接下來我再說說,傳統的,原生JS是如何使用onload的。

網上很常見的方法

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

解釋:window.onload必須等到頁面內包括圖片的所有元素載入完畢後才能執行。

還有一種寫法是

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

解釋:等待body載入完成,就會執行loadBody()方法。在window和dom之後執行,總是最後執行。這裡的onload函式會覆蓋window.onload

上述內容並不能解決我的問題,於是我去查我不是很想用的jQuery的方法:$(document).ready,想著能不能用原生JS實現該方法

function ready(fn){
 if(document.addEventListener){  //標準瀏覽器
  document.addEventListener('DOMContentLoaded',function(){
   //登出時間,避免重複觸發
   document.removeEventListener('DOMContentLoaded',arguments.callee,false);
   fn();  //執行函式
  },false);
 }else if(document.attachEvent){  //IE瀏覽器
  document.attachEvent('onreadystatechange',function(){
   if(document.readyState=='complete'){
    document.detachEvent('onreadystatechange',arguments.callee);
    fn();  //函式執行
   }
  });
 }
}

但是我發現我的專案上並沒有任何變化,依然不能用在專案上,這我就發愁了,我突然想到,專案上用的iframe於是就去搜了一下。

什麼是iframe

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

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

主要優勢:
(1)網頁編輯器(WYSIWYG Online HTML Editor),因為它們需要 reset 自己的 CSS 到自己的標準,而不被 parent CSS 的 override。
(2)沙箱隔離。
(3)需要保持獨立焦點和歷史管理的子視窗,如複雜的Web應用。

缺點:
(1)樣式/指令碼需要額外鏈入,會增加請求。
(2)iframe好在能夠把原先的網頁全部原封不動顯示下來,但是如果用在首頁,是搜尋引擎最討厭的。
(3)iframe的建立比其它包括scripts和css的 DOM 元素的建立慢了 1-2 個數量級。
(4)iframe會阻塞主頁面的Onload事件

好了,說了這麼多利弊,還是需要看具體專案來解決專案上的問題,那麼怎麼解決onload呢?

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

這段程式碼有兩點比較重要,首先是需要使用window.onload並且你需要知道attachEvent方法

寫了這麼久的程式碼,還是把IE放在了考慮範圍內,畢竟是Windws 核心,不想刪掉就隱藏吧,最近在寫前端程式碼的時候,發現如果專案本來沒有使用jQuery,就一直不使用jQuery,程式碼比較整潔,而且加上新出的vue、react都有自己不錯的封裝思路,於是我寫習慣了$這個dollar符終於可以不用了。

總結

以前總是很懶得寫前端程式碼,寫標籤呀寫JS呀,都覺得又繁瑣又沒有意思,可能是因為學校裡學的都是Java、C/C++這種,邏輯性很強,於是在前端的學習上,就慢了很多,慢了不知道好幾拍。當自己想寫一份前後端都很優雅,很華麗的程式碼的時候,就發現,只會後端是不夠的,程式碼寫出來要麼很醜,要麼前後互動很潦草,於是也就拿不出手了。最近嘔心瀝血寫了一份程式碼,還在潤色當中,而且申請的域名可算是透過了,這裡有一個大坑,就是,很久之前我在國內進行過備案,當時因為還是學生,就在學校所在地申請了備案號,結果現在想換又覺得麻煩,於是總是填錯,今天通知我稽核透過了,下一步就是聯網備案,聽說是又多了一步,慢慢走流程吧!

到此這篇關於iframe與window.onload如何使用詳解的文章就介紹到這了,更多相關iframe與window.onload內容請搜尋以前的文章或繼續瀏覽下面的相關文章

相關文章