如何知道 iframe 何时完成加载 DOM，但尚未加载所有图像？

Question

我的网页有一个 iframe，当用户单击showNewPage按钮时，我更改了它的 src。 我需要知道浏览器何时完成加载 iframe 的 DOM，但无需等待所有图像下载完毕。

var myIFrame = document.getElementById("myIframe")
var count = 0;
funcion showNewPage() {
  myIFrame.src = "http://example.com/page_" + count;
  count++;
}

当 iframe 完成加载 DOM 和所有图像时，此代码调用doSomething() ：

myIFrame.addEventListener("load", function(event) { doSomething(); });

当 iframe 完成加载 DOM 但尚未加载所有图像时，如何要求 myIFrame 调用doSomething() ？

---

ps：有一个事件DOMContentLoaded而不是load来实现这一点； 但此事件不适用于 iframe。 它仅适用于文档或窗口。 执行以下操作也不起作用，因为myIFrame.contentWindow在最开始时返回 null：

myIFrame.contentWindow.addEventListener("DOMContentLoaded", function(event) { doSomething(); });

ps：另一个问题没有回答我的问题，因为它依赖于onload事件，它会等到所有图像都下载完毕： 如何检测 iframe 何时已加载

Answer 1

正如您所发现的，在 iframe 初始化之前尝试获取其.contentWindow将返回null 。

解决这个问题的一种方法是

• 用空文档（ about:blank ）初始化您的框架，
• 获取对 iframe 的contentWindow的引用，这将始终是同一个对象，但是我们附加在其上的事件将在每次新导航时删除...
• 添加unload事件侦听器（因为它最接近导航）
• 等待一帧，让我们的contentWindow开始导航
• 添加您的DOMContentLoaded和我们的unload事件侦听器，以便我们可以在下次导航时重申

frame.onload = e => {
  const win = frame.contentWindow;
  frame.onload = null;
  win.addEventListener( 'unload', attachEvents );
  YOUR_CALLBACK(); // make it fire even at beginning?

  function attachEvents()  {
    setTimeout( () => {
      win.addEventListener( 'DOMContentLoaded', YOUR_CALLBACK );
      win.addEventListener( 'unload', attachEvents ); // do it again at next navigation
    }, 0 );
  };
};
frame.src = "about:blank";

作为一个小提琴，因为 StackSnippets 过度保护的 iframe 不允许我们访问内部框架的内容......