javascript檢測iframe是否已經載入完畢

admin發表於2017-04-12

本章節介紹一下,如何判斷一個iframe是否載入完畢。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var iframe = document.createElement("iframe");
iframe.src = "http://www.softwhy.com";
//如果不是低版本IE瀏覽器
if (!/*@cc_on!@*/0) { 
  iframe.onload = function(){
    alert("iframe載入完畢");
   };
}
else {
  iframe.onreadystatechange = function(){
    if (iframe.readyState == "complete"){
      console.log("iframe載入完畢");
    }
  };
}
document.body.appendChild(iframe);

下面是一種更好的方式,程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var iframe = document.createElement("iframe");
iframe.src = "http://www.softwhy.com";
//低版本IE瀏覽器 
if (iframe.attachEvent){
  iframe.attachEvent("onload", function(){
    console.log("iframe載入完畢");
  });
}
//標準瀏覽器
else {
  iframe.onload = function(){
    console.log("iframe載入完畢");
  };
}
document.body.appendChild(iframe);

特別說明:

(1).IE 支援iframe的onload事件,不過是隱形的,需要通過attachEvent來註冊。

(2).第二種方法比第一種方法更完美,因為readystatechange事件相對於load事件有一些潛在的問題。

相關文章