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

我的网页有一个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之前尝试获取其

。contentWindow

将返回

null

解决这个问题的一个办法是

• 使用空文档初始化框架（

  about:blank

  ）
• 获取对iframe的

  内容窗口的引用，它将始终是同一个对象，但是我们附加在它上的事件将在每次新导航时被删除

• 添加一个

  unload

  事件侦听器（因为它离导航最近）
• 请稍等一帧，以便我们的

  contentWindow

  启动导航
• 添加您的

  DOMContentLoaded

  和我们的

  unload

  事件监听器，以便我们可以在下次导航时重复

---

由于受保护的iframe上的StackSnippets不允许我们访问内部框架的内容…

可能会将

DOMContentLoaded

放置在iframe本身上，并使其输出一些主窗口可以与之通信的隐藏标志？这是否回答了您的问题@A.Meshu，iframe不会触发

DOMContentLoaded

事件；它只触发

load

事件。这就是问题所在@ℛƒæĿ，您提到的问题使用了

onload

事件，该事件在所有图像完成下载时触发。我需要知道何时加载DOM，而不必等待下载所有图像。

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";