溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何使用iframe與window.onload”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用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.οnlοad=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符終于可以不用了。
感謝各位的閱讀，以上就是“如何使用iframe與window.onload”的內容了，經過本文的學習后，相信大家對如何使用iframe與window.onload這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
