How can I detect whether an iframe is loaded?

在Web开发中，检测是否加载了iframe是一个常见的需求，可以通过几种不同的方法来实现。

方法1：使用JavaScript监听iframe的load事件

这是最直接的方法，通过监听iframe的load事件来判断iframe是否加载完成。示例如下：

html
<iframe id="myIframe" src="https://example.com"></iframe>
<script>
  document.getElementById('myIframe').addEventListener('load', function() {
    console.log('Iframe 已加载完成');
  });
</script>

方法2：检查iframe的内容

如果你需要检查iframe是否成功加载了特定的内容，可以通过访问iframe的contentWindow或contentDocument属性来实现。需要注意的是，出于同源策略的限制，这种方法只适用于与主页面同源的iframe。示例如下：

javascript
var iframe = document.getElementById('myIframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

if (iframeDoc.readyState  == 'complete') {
  console.log('Iframe 内容已加载完毕');
}

方法3：使用MutationObserver监视DOM变化

如果你需要监测iframe元素何时被添加到DOM中，可以使用MutationObserver。这是一个监听DOM变化的API，能够告诉你当DOM发生变化时的情况。示例如下：

javascript
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(function(node) {
        if (node.tagName === 'IFRAME') {
          console.log('一个新的iframe被添加到DOM');
        }
      });
    }
  });
});

var config = { childList: true, subtree: true };

observer.observe(document.body, config);

方法4：定时检查

在某些情况下，你可能需要周期性地检查iframe是否加载。可以通过设置定时器来实现：

javascript
var checkIframeLoaded = setInterval(function() {
  var iframe = document.getElementById('myIframe');
  if (iframe.contentWindow.document.readyState === 'complete') {
    console.log('Iframe 加载完成');
    clearInterval(checkIframeLoaded);
  }
}, 100);

总结

选择哪种方法取决于你的具体需求，例如你是否需要检测跨域的iframe、是否需要知道iframe里特定内容的加载状态等。在实际开发中，通常需要根据项目要求和环境限制来选择最合适的方法。