javascript - 如何从 XUL iframe 正确接收 DOMContentLoaded 事件？

Question

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

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

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

使用下面的 XUL 应该可以很容易地重现这个问题，只需在 Firefox 位置栏中输入 XUL 的路径，给定它的 chrome:// URL(类似于 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>

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

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

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

另一个也不起作用的最小示例可在 https://gist.github.com/2985342 获得。 .

我已经引用的页面包括:

• 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 调用中将第三个 useCapture 参数设置为 true (尽管我还没有注意到任何区别)将其设置为 false 或完全忽略它)。

我希望以“正确的方式”执行此操作，而不是对 contentDocument.readyState 进行轮询。

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

Answer 1

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

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(Mini 或 desktop 12 及以下使用 Presto Engine)支持此事件:

Currently, Firefox and Opera both implement DOMFrameContentLoaded events.

When a frame has been loaded, Opera dispatches an event on the owner iframe. This event then bubbles up to the window.

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