怎麼判斷iframe載入完成

如何判斷iframe載入完成：程式碼範例

在網頁開發中，當需要載入外部頁面或其他網頁時，常常會使用到iframe標籤。但是，有時候我們需要在iframe載入完成後進行一些操作，例如取得iframe中的內容或執行一些JavaScript程式碼。所以，判斷iframe載入完成是一項很重要的任務。

下面我將分享幾種判斷iframe載入完成的方法，並提供具體的程式碼範例。

1. 使用iframe的onload事件
   iframe標籤提供了一個onload事件，當iframe內的內容載入完成後會觸發該事件。我們可以透過在頁面中嵌入一個隱藏的iframe，並監聽其onload事件，來判斷iframe是否載入完成。

HTML程式碼：

<iframe id="myIframe" src="external.html" style="display:none;"></iframe>

JavaScript程式碼：

var iframe = document.getElementById("myIframe");
iframe.onload = function() {
  // iframe加载完成后执行的操作
  console.log("iframe加载完成");
};

2. 使用iframe的contentWindow屬性
   透過iframe的contentWindow屬性，我們可以取得到內嵌頁面的window物件。利用這個對象，我們可以判斷iframe中的文件是否載入完成。

HTML程式碼：

<iframe id="myIframe" src="external.html"></iframe>

JavaScript程式碼：

var iframe = document.getElementById("myIframe");
var iframeWindow = iframe.contentWindow;

var checkIframeLoaded = function() {
  if (iframe && iframe.contentDocument.readyState === 'complete') {
    // iframe加载完成后执行的操作
    console.log("iframe加载完成");
  } else {
    // 等待iframe加载完成
    setTimeout(checkIframeLoaded, 100);
  }
};

checkIframeLoaded();

3. 使用jQuery的ready方法
   如果專案中使用了jQuery函式庫，可以使用它提供的ready方法來判斷iframe載入完成。

HTML程式碼：

<iframe id="myIframe" src="external.html"></iframe>

JavaScript程式碼：

$(document).ready(function() {
  $('#myIframe').on('load', function() {
    // iframe加载完成后执行的操作
    console.log('iframe加载完成');
  });
});

以上是幾種判斷iframe載入完成的方法和程式碼範例。根據實際情況選擇合適的方法，即可實現對iframe載入完成事件的監聽和處理。希望本文對您在判斷iframe載入完成時有所幫助！

以上是怎麼判斷iframe載入完成的詳細內容。更多資訊請關注PHP中文網其他相關文章！