iframe 加载完成回调详解

VPWHV • 2025-04-02 01:28 • 编程

一、什么是 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 的加载完成回调。

原创文章，作者：VPWHV，如若转载，请注明出处：https://www.506064.com/n/367997.html