检测iframe中的DOMContentLoaded [英] Detect DOMContentLoaded in iframe

问题描述

因为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。

Paraent页面：

  dfd = new $ .Deferred; 
 dfd.done（function（）{alert（frame page of DOM ready ready！）;}）; 
  

框架页面：

  $（function（）{window.parent.dfd.resolve（）;}）; 
  

尽管如此，了解第一种方法/

解决方案

在回答这个问题，我发现你的 DOMContentLoaded 事件监听器不起作用的原因。在我看来，你有两个问题。

首先，您正在尝试收听 DOMContentLoaded 事件在iFrame本身。那不是iFrame事件。这是一个文件事件。所以你必须到达iFrame来获取contentWindow，然后从中获取文档。这就导致了第二个问题。

其次，当iFrame首次创建时，它有一个虚拟的文档这不是最终会通过 .src 属性加载动态内容时的文档。所以，即使你这样做：

  this.els.stage_ifr.contentWindow.document 
  

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

---

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

---

无论如何，我以为我会解释一些发生了什么您的初始代码并提供另一种解决方案，即使这个问题是在一年以前发布的（虽然没有回答）。

---

更新：

我已经开发了一种追踪iFrame的 DOMContentLoaded 的方法与其父母的起源相同。您可以看到代码这里。

I was surprised to find the following doesn't appear to work, insofar as the DOMContentLoaded event doesn't fire (this.els is an object of elements).

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

The page loads into the iframe fine, but no callback. The DOM level zero onload, however, works.

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

A workaround is to prepare a globally-accessible jQuery deferred object in the parent page and resolve it via a DOM-ready event fired from the page called into the iframe, rather than listening for DOM-ready from the parent.

Paraent page:

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

Frame page:

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

Nonetheless it would be good to know what's up with the first approach/

解决方案

In the process of answering this question, I discovered the reason your DOMContentLoaded event listener doesn't work. It appears to me that you have two issues.

First, you're trying to listen for the DOMContentLoaded event on the iFrame itself. That isn't an iFrame event. It is a document event. So you have to reach into the iFrame to get the contentWindow and then get the document from that. That leads into the second issue.

Second, when an iFrame is first created, it has a dummy document in it that is NOT the same document as will eventually be there when dynamic content is loaded via the .src attribute. So, even if you did:

this.els.stage_ifr.contentWindow.document

to get the document in the iFrame, it will not necessarily be the right document and thus the DOMContentLoaded event won't fire on it (I've seen this behavior in Chrome).

---

MDN says that one can listen for the DOMFrameContentLoaded event on the iFrame itself and this will correspond with when the underlying document actually gets DOMContentLoaded. Unfortunately, I can't get this event to work in any browser. So, at this moment, the only work-around I know of is to either trigger the load event from within the iFrame itself where it can listen to its own DOMContentLoaded event (it can call out to the parent window if need be) or to just listen for the load event on the iFrame object and know that it won't fire until resources such as style sheets and images in the iFrame are also loaded.

---

Anyway, I thought I'd explain some of what was going on with your initial code and offer another solution even though this question was posted more than a year ago (though never answered).

---

Update:

I've developed a method of tracking DOMContentLoaded for an iFrame loaded with the same origin as its parent. You can see the code here.

这篇关于检测iframe中的DOMContentLoaded的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！