iframe與window.onload如何使用詳解
我要評(píng)論前言
在項(xiàng)目上，需要等頁面加載完之后再執(zhí)行一個(gè)方法用于修改頁面的顏色，于是導(dǎo)出都是在使用onload解決，然而這并不能解決我遇到的問題，因?yàn)槲野l(fā)現(xiàn)，我項(xiàng)目上的頁面仍然沒加載，折騰了很久才知道，原來是因?yàn)轫?xiàng)目使用了很古老的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必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(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加載完成，就會(huì)執(zhí)行l(wèi)oadBody()方法。在window和dom之后執(zhí)行，總是最后執(zhí)行。這里的onload函數(shù)會(huì)覆蓋window.onload
上述內(nèi)容并不能解決我的問題，于是我去查我不是很想用的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)目上并沒有任何變化，依然不能用在項(xiàng)目上，這我就發(fā)愁了，我突然想到，項(xiàng)目上用的iframe于是就去搜了一下。
什么是iframe
HTML內(nèi)聯(lián)框架元素 (<iframe>) 表示嵌套的browsing context。它能夠?qū)⒘硪粋€(gè)HTML頁面嵌入到當(dāng)前頁面中。每個(gè)嵌入的瀏覽上下文（embedded browsing context）都有自己的會(huì)話歷史記錄(session history)和DOM樹。包含嵌入內(nèi)容的瀏覽上下文稱為父級(jí)瀏覽上下文。頂級(jí)瀏覽上下文（沒有父級(jí)）通常是由 Window 對象表示的瀏覽器窗口。
iframe 的頁面和父頁面（parent）是分開的，所以它意味著，這是一個(gè)獨(dú)立的區(qū)域，不受 parent 的 CSS 或者全局的 JavaScript 的影響。
主要優(yōu)勢：
（1）網(wǎng)頁編輯器（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ì)增加請求。
（2）iframe好在能夠把原先的網(wǎng)頁全部原封不動(dòng)顯示下來,但是如果用在首頁,是搜索引擎最討厭的。
（3）iframe的創(chuàng)建比其它包括scripts和css的 DOM 元素的創(chuàng)建慢了 1-2 個(gè)數(shù)量級(jí)。
（4）iframe會(huì)阻塞主頁面的Onload事件
好了，說了這么多利弊，還是需要看具體項(xiàng)目來解決項(xiàng)目上的問題，那么怎么解決onload呢？
// 頁面加載時(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方法
寫了這么久的代碼，還是把IE放在了考慮范圍內(nèi)，畢竟是Windws 內(nèi)核，不想刪掉就隱藏吧，最近在寫前端代碼的時(shí)候，發(fā)現(xiàn)如果項(xiàng)目本來沒有使用jQuery，就一直不使用jQuery，代碼比較整潔，而且加上新出的vue、react都有自己不錯(cuò)的封裝思路，于是我寫習(xí)慣了$這個(gè)dollar符終于可以不用了。
總結(jié)
以前總是很懶得寫前端代碼，寫標(biāo)簽呀寫JS呀，都覺得又繁瑣又沒有意思，可能是因?yàn)閷W(xué)校里學(xué)的都是Java、C/C++這種，邏輯性很強(qiáng)，于是在前端的學(xué)習(xí)上，就慢了很多，慢了不知道好幾拍。當(dāng)自己想寫一份前后端都很優(yōu)雅，很華麗的代碼的時(shí)候，就發(fā)現(xiàn)，只會(huì)后端是不夠的，代碼寫出來要么很丑，要么前后交互很潦草，于是也就拿不出手了。最近嘔心瀝血寫了一份代碼，還在潤色當(dāng)中，而且申請的域名可算是通過了，這里有一個(gè)大坑，就是，很久之前我在國內(nèi)進(jìn)行過備案，當(dāng)時(shí)因?yàn)檫€是學(xué)生，就在學(xué)校所在地申請了備案號(hào)，結(jié)果現(xiàn)在想換又覺得麻煩，于是總是填錯(cuò)，今天通知我審核通過了，下一步就是聯(lián)網(wǎng)備案，聽說是又多了一步，慢慢走流程吧！
到此這篇關(guān)于iframe與window.onload如何使用詳解的文章就介紹到這了,更多相關(guān)iframe與window.onload內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
遮罩層 + Iframe實(shí)現(xiàn)界面自動(dòng)顯示的示例代碼
這篇文章主要介紹了遮罩層 + Iframe實(shí)現(xiàn)界面自動(dòng)顯示的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-04-26通過iframe監(jiān)聽一個(gè)DOM元素大小變化
開發(fā)過程中經(jīng)常遇到的一個(gè)問題就是如何監(jiān)聽一個(gè) div 的size變化。今天小編通過本文給大家介紹通過iframe元素來實(shí)現(xiàn)監(jiān)聽。本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋2020-04-17
關(guān)于解決iframe標(biāo)簽嵌套問題的解決方法
這篇文章主要介紹了關(guān)于解決iframe標(biāo)簽嵌套問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一2020-03-04- 這篇文章主要介紹了iframe跨域的幾種常用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了跨域修改iframe頁面內(nèi)容詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2019-10-31- 這篇文章主要介紹了iframe在移動(dòng)端的縮放的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-12
web響應(yīng)式布局中iframe自適應(yīng)的方法
響應(yīng)式的概念應(yīng)該是覆蓋了自適應(yīng)，但是包括的東西更多了。響應(yīng)式布局可以根據(jù)屏幕的大小自動(dòng)的調(diào)整頁面的展現(xiàn)方式，以及布局。這篇問題給大家介紹了在web響應(yīng)式布局中讓ifr2016-10-20- 這篇文章給大家介紹了div被iframe遮住的一些情況，以及被遮住后的解決辦法，有需要的朋友們可以參考借鑒。2016-09-07
淺談Iframe網(wǎng)頁內(nèi)部的導(dǎo)航窗口
下面小編就為大家?guī)硪黄獪\談Iframe網(wǎng)頁內(nèi)部的導(dǎo)航窗口。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-17- frame這個(gè)標(biāo)簽不知大家注意過沒有,它必須放在frameset中使用,而且經(jīng)常容易和iframe混淆,這里我們就來舉例講解HTML中iframe和frame的區(qū)別,需要的朋友可以參考下2016-05-30
