js下判斷 iframe 是否加載完成的完美方法

更新時間：2010年10月26日 13:43:44 作者：

一般來說，我們判斷 iframe 是否加載完成其實與判斷JavaScript 文件是否加載完成。

采用的方法很類似：

 
var iframe = document.createElement("iframe"); 
iframe.src = "http://www.dhdzp.com"; 

if (!/*@cc_on!@*/0) { //if not IE 
iframe.onload = function(){ 
alert("Local iframe is now loaded."); 
}; 
} else { 
iframe.onreadystatechange = function(){ 
if (iframe.readyState == "complete"){ 
alert("Local iframe is now loaded."); 
} 
}; 
} 
document.body.appendChild(iframe); 

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的評論中 Christopher 提供了一個新的判斷方法（很完美）：

復(fù)制代碼代碼如下:

 
var iframe = document.createElement("iframe"); 
iframe.src = "http://sc.jb51.net"; 
if (iframe.attachEvent){ 
iframe.attachEvent("onload", function(){ 
alert("Local iframe is now loaded."); 
}); 
} else { 
iframe.onload = function(){ 
alert("Local iframe is now loaded."); 
}; 
} 
document.body.appendChild(iframe); 

幾點補充說明：

IE 支持 iframe 的 onload 事件，不過是隱形的，需要通過 attachEvent 來注冊。
第二種方法比第一種方法更完美，因為 readystatechange 事件相對于 load 事件有一些潛在的問題。

您可能感興趣的文章:

相關(guān)文章

JavaScript前端實現(xiàn)拼圖分割效果
這篇文章主要為大家詳細介紹了如何通過JavaScript前端實現(xiàn)拼圖分割效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-10-10
JavaScript檢測字符串中是否含有html標簽實現(xiàn)方法
這篇文章主要介紹了JavaScript檢測字符串中是否含有html標簽實現(xiàn)方法,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下
2015-07-07
微信小程序入門之廣告條實現(xiàn)方法示例
這篇文章主要介紹了微信小程序入門之廣告條實現(xiàn)方法,涉及微信小程序基于swiper與navigator組件的文字信息滑動展示相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
webpack如何自動生成網(wǎng)站圖標詳解
這篇文章主要給大家介紹了關(guān)于webpack如何自動生成網(wǎng)站圖標的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-01-01
開啟BootStrap學(xué)習(xí)之旅
當下最流行的前端開發(fā)框架Bootstrap，可大大簡化網(wǎng)站開發(fā)過程，從而深受廣大開發(fā)者的喜歡，你如果也喜歡Bootstrap前端開發(fā)框架，不要錯過這次旅行
2016-05-05
JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個方法技巧,需要的朋友可以參考下
2015-07-07
一篇文中告訴你JS中的"值傳遞"和"引用傳遞"
在JavaScript中,可以通過值和引用傳遞,兩者之間的主要區(qū)別是,按值傳遞發(fā)生在賦值基本類型的時候,而賦值對象時按引用傳遞,下面這篇文章主要給大家介紹了關(guān)于JS中"值傳遞"和"引用傳遞"的相關(guān)資料,需要的朋友可以參考下
2022-05-05
基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)
這篇文章主要介紹了基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2015-11-11
ES6標準 Arrow Function（箭頭函數(shù)=>）
ES6標準新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）,為什么叫Arrow Function？因為它的定義用的就是一個箭頭
2020-05-05
javascript檢測移動設(shè)備橫豎屏
移動端的開發(fā)過程中，免不了要判斷橫豎屏，然后在執(zhí)行其他操作，比如分別加載不同樣式，橫屏顯示某些內(nèi)容，豎屏顯示其他內(nèi)容等等。
2016-05-05