App下載

怎么使用iframe與window.onload?使用方法詳解！

猿友 2021-08-02 16:54:21 瀏覽數(shù) (2703)
反饋

最近不少的小伙伴們就來(lái)問(wèn)小編能不能講講：“ 怎么使用iframe與window.onload? ”這個(gè)問(wèn)題，那么下面是相關(guān)問(wèn)題的解決方法！希望對(duì)大家有所幫助！

前言

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

網(wǎng)上很常見(jiàn)的方法：

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

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

還有一種寫(xiě)法是：

<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加載完成，就會(huì)執(zhí)行l(wèi)oadBody()方法。在window和dom之后執(zhí)行，總是最后執(zhí)行。這里的onload函數(shù)會(huì)覆蓋window.onload

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

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

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

什么是iframe

HTML內(nèi)聯(lián)框架元素 (<iframe>) 表示嵌套的browsing context。它能夠?qū)⒘硪粋€(gè)HTML頁(yè)面嵌入到當(dāng)前頁(yè)面中。每個(gè)嵌入的瀏覽上下文（embedded browsing context）都有自己的會(huì)話歷史記錄(session history)和DOM樹(shù)。包含嵌入內(nèi)容的瀏覽上下文稱為父級(jí)瀏覽上下文。頂級(jí)瀏覽上下文（沒(méi)有父級(jí)）通常是由 Window 對(duì)象表示的瀏覽器窗口。

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

主要優(yōu)勢(shì)：
（1）網(wǎng)頁(yè)編輯器（WYSIWYG Online HTML Editor），因?yàn)樗鼈冃枰?reset 自己的 CSS 到自己的標(biāo)準(zhǔn)，而不被 parent CSS 的 override。
（2）沙箱隔離。
（3）需要保持獨(dú)立焦點(diǎn)和歷史管理的子窗口，如復(fù)雜的Web應(yīng)用。

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

好了，說(shuō)了這么多利弊，還是需要看具體項(xiàng)目來(lái)解決項(xiàng)目上的問(wèn)題，那么怎么解決onload呢？

// 頁(yè)面加載時(shí)判斷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();
        };
}};

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

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

總結(jié)

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

到這邊我們對(duì)于：“怎么使用iframe與window.onload?”這方面的講解就結(jié)束了，那么希望小編的辛苦付出可以讓大家有所收獲，當(dāng)然如果大家對(duì)html5有興趣的話我們都可以在W3Cschool中做個(gè)全面的學(xué)習(xí)！ 


HTML5

0 人點(diǎn)贊