jquery监听iframe加载完成|极客教程

jquery监听iframe加载完成

在前端开发中，我们经常会遇到需要监听iframe加载完成的场景。iframe是一个内联框架，可以嵌入其他网页或者文档，但是其中的内容加载完成与否是一个比较难以判断的问题。在本文中，我们将详细介绍如何使用jquery监听iframe加载完成的方法。

为什么需要监听iframe加载完成

在一些情况下，我们需要等待iframe中的内容加载完成后再执行一些操作。比如，在一个网页中嵌入了一个第三方的广告iframe，我们需要在广告加载完成后再显示出来，以确保用户能够正常看到广告内容。又比如在一个处理文件上传的页面中，我们需要等待iframe加载完成后再获取上传结果。

方法一：使用load事件监听iframe加载完成

jquery提供了一个方便的方法来监听iframe的加载完成，那就是使用load事件。可以监听iframe元素的load事件，以确保iframe中的内容加载完成后再执行相应的操作。

<!DOCTYPE html>
<html>
<head>
  <title>监听iframe加载完成示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <iframe src="https://www.example.com" id="myFrame"></iframe>

  <script>
     $(document).ready(function() {$ ('#myFrame').on('load', function() {
        console.log('iframe加载完成');
        // 在这里可以执行其他操作
      });
    });
  </script>
</body>
</html>

在上面的代码中，当iframe加载完成后，会在控制台中输出”iframe加载完成”。我们可以在load事件的回调函数中执行其他的操作，比如获取iframe中的内容。

方法二：轮询检测iframe加载完成状态

除了使用load事件来监听iframe加载完成外，还可以通过轮询的方式检测iframe是否加载完成。这种方式相对来说比较笨拙，但是在某些情况下可能会更加灵活。

<!DOCTYPE html>
<html>
<head>
  <title>轮询检测iframe加载完成示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <iframe src="https://www.example.com" id="myFrame"></iframe>

  <script>
     $(document).ready(function() { var iframeLoaded = false; var checkIframeLoaded = setInterval(function() { if ($ ('#myFrame').contents().find('body').length > 0) {
          clearInterval(checkIframeLoaded);
          iframeLoaded = true;
          console.log('iframe加载完成');
          // 在这里可以执行其他操作
        }
      }, 1000);
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了setInterval来每隔1秒检测一次iframe是否加载完成。当iframe中的body元素存在时，表示iframe加载完成。此时我们清除轮询，并且执行相应的操作。