如何从XUL iframe正确接收DOMContentLoaded事件？ [英] How to properly receive the DOMContentLoaded event from an XUL iframe?
问题描述
我正在使用一个极小的Firefox扩展，将网页加载到XUL iframe中。 （我也尝试了 html：iframe ，但遇到相同的结果。）页面可能需要一些时间来完全加载 - 我正在尝试接收 DOMContentLoaded 事件，它应该在加载事件之前。
I'm working on a minimal Firefox extension that loads a web page into an XUL iframe. (I also tried the html:iframe, but met identical results.) The page may take some time to load completely - and I'm trying to receive the DOMContentLoaded event, which should come before the load event.
主要的原因是我试图注入一个CSS样式表，这应该在DOMContentLoaded事件之后立即执行，而不是等待并让页面显示为unsyled，直到加载事件，但是这将被用于其他原因所以CSS特定的替代方案不是一个可行的解决方案。）
(The main reason being that I'm trying to inject a CSS stylesheet, and this should be done immediately after the DOMContentLoaded event, instead of waiting and having the page appear "unstyled" until the load event. However, this will be used for other reasons as well, so CSS-specific alternatives aren't a viable work-around.)
然而，到目前为止，我只能收到加载事件 - 而不是 DOMContentLoaded 或 readyState 事件。
However, so far, I'm only able to receive the load event - and not the DOMContentLoaded nor the readyState events.
使用以下XUL可以轻松地重现该问题，只需在Firefox的位置栏中输入XUL的路径，给定其 chrome：// URL（类似于这个）：
The issue should be easily reproducible using the below XUL, and simply entering the path to the XUL in the Firefox location bar given its chrome:// URL (similar to this):
<?xml version="1.0"?>
<!DOCTYPE window>
<window xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript">
window.addEventListener("DOMContentLoaded", function(event){
try{
var outElem = document.getElementById("out");
var out = function(s){
outElem.value += s + "\n";
};
var frameTest = document.getElementById("iframe-test");
out("start: " + frameTest.contentDocument.readyState);
frameTest.addEventListener("DOMContentLoaded",
function(e){
out("DOMContentLoaded! " + e);
},
true);
frameTest.addEventListener("readystatechange",
function(e){
out("readystatechange: " + e);
},
true);
frameTest.addEventListener("load",
function(e){
out("load: " + e + ", state: " + frameTest.contentDocument.readyState);
},
true);
out("all listeners registered, frame location: " + frameTest.contentWindow.location + ", state: " + frameTest.contentDocument.readyState);
}catch(e){
alert(e);
}
}, true);
</script>
<iframe id="iframe-test" type="content" src="http://www.google.com" height="400" width="400"/>
<textbox id="out" rows="10" cols="80" multiline="true"/>
</window>
我在调试文本框中收到的输出是：
The output I'm receiving in the debug text box is:
start: uninitialized
all listeners registered, frame location: about:blank, state: uninitialized
load: [object Event], state: complete
我无法弄清楚为什么我没有收到任何 DOMContentLoaded 或 readystatechange：输出。
I can't figure out why I don't receive any DOMContentLoaded! or readystatechange: outputs.
另一个也不起作用的最小例子可从 https://gist.github.com/2985342 获取。
Another minimal example that also doesn't work is available at https://gist.github.com/2985342.
我已经引用的页面包括：
Pages I've already referenced include:
- 在XUL中，我如何知道浏览器标签已经加载？
- 绕过同样的方式rigin政策
- https：/ /developer.mozilla.org/en/DOM/element.addEventListener
- https://developer.mozilla.org/en/DOM/DOM_event_reference
- In XUL, how do I know a browser-tag has finished loading?
- Ways to circumvent the same-origin policy
- https://developer.mozilla.org/en/DOM/element.addEventListener
- https://developer.mozilla.org/en/DOM/DOM_event_reference
我在irc.mozilla.org/#extdev上提到这一点，只能获得为别人工作的回应，而最好使用捕获侦听器。 - 这就是为什么我将所有上述 addEventListener中的第三个电话（虽然我没有注意到任何差异，但将其设置为false或完全忽略）。 useCapture 参数设置为 true
I've mentioned this on irc.mozilla.org/#extdev, and was only able to obtain a response of "Works for everyone else.", and "Best to use capturing listeners, though." - which is why I have the 3rd useCapture argument set to true in all the above addEventListener calls (though I haven't noticed any difference yet with setting this to false or omitting it entirely).
我正在寻找这个正确的方式，而不用诉诸于 contentDocument.readyState 。
I'm looking to do this "the right way", without resorting to polling on contentDocument.readyState.
更新： / strong>这个和其他类似的例子通过实时XUL编辑器（ https://addons.mozilla.org/en-US/firefox/addon/extension-developer/ ），但不是当加载为 chrome：//test/content/test.xul 文件。是真的，当通过位置栏加载时，有受限制的权限等导致这个问题？
Update: This and other similar examples work as expected when sampled through the "Real-time XUL Editor" (part of https://addons.mozilla.org/en-US/firefox/addon/extension-developer/), for example - but not when loaded as a chrome://test/content/test.xul file. Is it true that when loaded through the location bar, that there are restricted privileges, etc., that are causing this issue?
推荐答案
根据Gecko文档， DOMFrameContentLoaded 应该工作作为替代事件监听器：
According to the Gecko documentation, DOMFrameContentLoaded should work as an alternative event listener:
当框架加载并被解析时，DOMFrameContentLoaded事件将被执行，而不必等待样式表，图像，和子帧要加载。这个事件类似于DOMContentLoaded，但仅适用于框架。
The DOMFrameContentLoaded event is executed when a frame has finished loading and being parsed, without waiting for stylesheets, images, and subframes to be done loading. This event is similar to DOMContentLoaded but only applies to frames.
Firefox和Opera（迷你或桌面12及以下，使用Presto引擎）支持这个事件：
Firefox and Opera(Mini or desktop 12 and under which use the Presto Engine) support this event:
目前，Firefox和Opera都实现DOMFrameContentLoaded事件。
Currently, Firefox and Opera both implement DOMFrameContentLoaded events.
当框架被加载时，Opera会在所有者 iframe 上发出一个事件。这个事件然后冒泡到窗口。
When a frame has been loaded, Opera dispatches an event on the owner iframe. This event then bubbles up to the window.
Firefox在所有者的文档上发出一个事件的iframe 。它发生在窗口。该元素的目标是其内容已加载的 iframe 。如果所有者文档本身包含在框架中，则会将事件分派到父文档。 事件目标仍然是内容加载时的框架（等等到父文档链的顶部）。
Firefox dispatches an event on the document on the owner iframe. It bubbles to the window. The target of that element is the iframe whose content has loaded. If the owner document is itself contained in a frame, an event is dispatched to the parent document. event target is still the frame when content has loaded (and so on to the top of the parent document chain).
参考
- Webkit Bug 33604 - iframe.contentWindow doesn't fire DOMContentLoaded (implement DOMFrameContentLoaded?)
这篇关于如何从XUL iframe正确接收DOMContentLoaded事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
