检测 iframe 中的 DOMContentLoaded

Question

我惊讶地发现以下似乎不起作用，因为 DOMContentLoaded 事件没有触发（this.els 是元素的对象）。

this.els.stage_ifr.prop('src', 'templates/'+ee.globals.creating+'/item'+this.id);
this.els.stage_ifr[0].addEventListener('DOMContentLoaded', function() {
    alert('loaded!');
}, false);

页面加载到 iframe 中正常，但没有回调。但是，DOM 零级 onload 可以工作。

this.els.stage_ifr[0].onload = function() { alert('loaded!'); }; //<-- fires

一种解决方法是在父页面中准备一个全局可访问的 jQuery 延迟对象，并通过调用 iframe 的页面触发 DOM-ready 事件来解决它，而不是从父页面监听 DOM-ready。

父页面：

dfd = new $.Deferred;
dfd.done(function() { alert("frame page's DOM is ready!"); });

框架页面：

$(function() { window.parent.dfd.resolve(); });

尽管如此，了解第一种方法的情况会很好......

Answer 1

在回复this question的过程中，我发现了你的DOMContentLoaded事件监听器不起作用的原因。在我看来，您有两个问题。

首先，您尝试在 iFrame 本身上侦听 DOMContentLoaded 事件。这不是 iFrame 事件。这是一个文档事件。因此，您必须进入 iFrame 以获取 contentWindow，然后从中获取文档。这就引出了第二个问题。

其次，当第一次创建 iFrame 时，其中有一个虚拟的 document，它与通过 .src 属性加载动态内容时最终存在的文档不同。所以，即使你这样做了：

this.els.stage_ifr.contentWindow.document

要在 iFrame 中获取文档，它不一定是正确的文档，因此不会触发 DOMContentLoaded 事件（我在 Chrome 中看到过这种行为）。

---

MDN 表示可以在 iFrame 本身上侦听DOMFrameContentLoaded 事件，这与底层文档实际获取DOMContentLoaded 的时间相对应。不幸的是，我无法让这个事件在任何浏览器中工作。所以，目前，我知道的唯一解决方法是从 iFrame 本身触发加载事件，它可以在其中监听自己的 DOMContentLoaded 事件（如果需要，它可以调用父窗口）或者只监听 iFrame 对象上的 load 事件，并知道在 iFrame 中的样式表和图像等资源也加载之前它不会触发。

---

无论如何，我想我会解释一下你的初始代码发生了什么，并提供另一个解决方案，尽管这个问题是一年多前发布的（尽管从未回答过）。

---

更新：

我开发了一种跟踪DOMContentLoaded 的方法，该方法用于加载与其父级相同来源的 iFrame。可以看代码here。

Answer 2

在尝试了不同的选项后，我发现以下代码对我有用：

var iframe = document.getElementById("app-frame-id");
iframe.contentWindow.addEventListener("DOMContentLoaded", onFrameDOMContentLoaded, true);
function onFrameDOMContentLoaded () { 
     console.log("DOMContentLoaded");
};

Answer 3

如果您的页面和 iframe 在同一个域中，您必须先等待原始页面触发 DOMContentLoaded，然后在 iframe 的 Window 上附加一个 DOMContentLoaded 事件侦听器（不是Document）。

假设您有如下 iframe，

<iframe id="iframe-id" name="iframe-name" src="..."></iframe>

下一个 sn-p 将允许您挂钩 iframe 的 DOMContentLoaded 事件：

document.addEventListener('DOMContentLoaded', function () {
    var iframeWindow = frames['iframe-name'];
    // var iframeWindow = document.querySelector('#iframe-id').contentWindow
    // var iframeWindow = document.getElementById('iframe-id').contentWindow

    iframeWindow.addEventListener('DOMContentLoaded', function () {
        console.log('iframe DOM is loaded!');
    });
});

Answer 4

这可能更像是一个 hack，但帮助我解决了一个类似的问题。

我现在正在收听框架内容的onmouseenter。

此事件在load 之前触发（如果用户移动鼠标）。但就我而言，我需要事件来初始化上下文菜单，无论如何使用鼠标都是先决条件。

它甚至会在鼠标下的框架内容发生变化时触发。