javascript - 检测 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 就绪事件来解析它，而不是从父页面监听 DOM 就绪。

父页面:

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 .