iframe 加載完成回調詳解

一、什麼是 iframe 加載完成回調

在網頁中，我們經常會需要使用 iframe 來加載外部頁面，比如我們要在自己的網頁中嵌入另一個網站的網頁，或者是需要加載一些異步加載的內容。但是，由於 iframe 是異步加載的，所以在頁面中使用 iframe 進行頁面嵌入後，可能會遇到一個問題：如何確定 iframe 加載完成了。這時候，我們就可以使用 iframe 加載完成回調來解決這個問題。

二、傳統的 iframe 加載完成檢測方式

在過去，我們可能會使用 setInterval() 來輪詢 iframe 的 readyState 屬性，以確認 iframe 是否完成加載。代碼如下所示：

var iframe = document.getElementById('my-iframe');
var checkCount = 0;
var interval = setInterval(function () {
   if (iframe.readyState === 'complete') {
       clearInterval(interval);
       // iframe 加載完成
   } else {
       checkCount++;
       if (checkCount > 20) {
           clearInterval(interval);
           // iframe 加載失敗或超時
       }
   }
}, 100);   // 每隔 100 毫秒檢查一次

這種方式雖然可行，但是需要不斷地輪詢，不僅效率低下，而且如果在一個特定時間內 iframe 一直未能完成加載，輪詢的時間可能會非常長。

三、基於 window.addEventListener() 的 iframe 加載完成回調

不同於傳統的輪詢方式，我們現在可以基於 window.addEventListener() 來實現 iframe 加載完成回調。

var iframe = document.getElementById('my-iframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.addEventListener('load', function() {
    // iframe 加載完成
});

使用這種方法，當 iframe 完成加載時，會觸發 window 的 load 事件，從而實現對 iframe 的加載完成回調。

四、使用 jQuery 實現 iframe 加載完成回調

如果你使用 jQuery，可以很方便地實現基於事件監聽的 iframe 加載完成回調：

$("#my-iframe").on("load", function(){
    // iframe 加載完成
});

五、總結

在實現 iframe 加載完成回調中，我們可以通過傳統的輪詢方式來實現，但是效率不高，且可能會出現等待時間過長的情況。更好的方式是使用基於事件監聽的方式，比如 window.addEventListener() 或者 jQuery 的 on() 方法，在 iframe 加載完成時觸發回調。這樣，能夠更加高效、安全、精準地實現對 iframe 的加載完成回調。