如何正确接收来自 XUL iframe 的 DOMContentLoaded 事件？

Question

我正在开发一个最小的 Firefox 扩展，它将网页加载到 XUL iframe 中。（我也尝试过html:iframe，但得到了相同的结果。）该页面可能需要一些时间才能完全加载 - 并且我正在尝试接收该DOMContentLoaded事件，该事件应该在该load事件之前发生。

（主要原因是我试图注入 CSS 样式表，这应该在 DOMContentLoaded 事件之后立即完成，而不是等待并让页面显示为“无样式”，直到加载事件。但是，这将用于还有其他原因，因此特定于 CSS 的替代方案并不是可行的解决方法。）

但是，到目前为止，我只能接收load事件 - 而不能DOMContentLoaded接收readyState事件。

使用下面的 XUL 应该可以轻松重现该问题，只需在 Firefox 地址栏中输入 XUL 的路径（给定其chrome://URL）（类似于此）：

<?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>

我在调试文本框中收到的输出是：

start: uninitialized
all listeners registered, frame location: about:blank, state: uninitialized
load: [object Event], state: complete

我不明白为什么我没有收到任何DOMContentLoaded!输出readystatechange:。

另一个不起作用的最小示例可以在https://gist.github.com/2985342上找到。

我已经引用过的页面包括：

• 在 XUL 中，我如何知道浏览器标签已完成加载？
• 规避同源策略的方法
• https://developer.mozilla.org/en/DOM/element.addEventListener
• https://developer.mozilla.org/en/DOM/DOM_event_reference

我在 irc.mozilla.org/#extdev 上提到过这一点，但只能得到“适用于其他人”和“不过最好使用捕获侦听器”的响应。- 这就是为什么我在所有上述调用中将第三个useCapture参数设置为（尽管我还没有注意到将其设置为 false 或完全忽略它有任何区别）。trueaddEventListener

我希望以“正确的方式”做到这一点，而不是诉诸轮询contentDocument.readyState。

更新：例如， 通过“实时 XUL 编辑器”（https://addons.mozilla.org/en-US/firefox/addon/extension-developer/的一部分）采样时，此示例和其他类似示例按预期工作- 但当作为chrome://test/content/test.xul文件加载时则不然。通过地址栏加载时，是否确实存在权限受限等导致此问题的情况？

Answer 1

根据 Gecko 文档，DOMFrameContentLoaded应该作为替代事件监听器：

DOMFrameContentLoaded 事件在框架完成加载和解析时执行，无需等待样式表、图像和子框架完成加载。该事件与 DOMContentLoaded 类似，但仅适用于框架。

Firefox 和 Opera（Mini 或 Desktop 12 及以下使用 Presto 引擎）支持此事件：

目前，Firefox 和 Opera 都实现了 DOMFrameContentLoaded 事件。

当一个框架被加载时，Opera 会向所有者调度一个事件iframe。然后该事件冒泡到window.

Firefox 在所有者的文档上调度一个事件iframe。它冒泡到window。该元素的目标是iframe其内容已加载的元素。如果所有者文档本身包含在 a 中frame，则会将事件分派到父文档。event target仍然是内容加载后的框架（依此类推到父文档链的顶部）。

参考

• Webkit Bug 33604 - iframe.contentWindow 不会触发 DOMContentLoaded（实现 DOMFrameContentLoaded？）