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

我正在开发一个最小的Firefox扩展，它将网页加载到XUL iframe中。（我还尝试了

html:iframe

，但得到了相同的结果。）页面可能需要一些时间才能完全加载-我正在尝试接收

DOMContentLoaded

事件，它应该在

load

事件之前

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

但是，到目前为止，我只能接收

load

事件，而不能接收

domcontentload

或

readyState

事件

使用下面的XUL，只要在Firefox位置栏中输入XUL的路径，并给出其

chrome://

URL（类似于），就可以很容易地重现该问题：

我不明白为什么我没有收到任何

DOMContentLoaded或
readystatechange:
输出

另一个同样不起作用的最小示例可以在上找到

我已经提到的页面包括：







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

我希望以“正确的方式”做到这一点，而不必在
contentDocument.readyState
上进行轮询

更新：当通过“实时XUL编辑器”（的一部分）进行采样时，此示例和其他类似示例与预期一样工作，例如-但当作为
chrome://test/content/test.xul
文件。当通过位置栏加载时，是否确实存在导致此问题的受限权限等？
当您通过Firefox菜单>Web开发者>错误控制台>
打开打开XUL页面时，是否会发生此问题("chrome://yourpage.xul“，”，“width=640，height=480”）；
？位于位置栏下方的浏览器被标记为内容主浏览器，这使得其中的页面以受限权限运行，而不管页面来自哪个协议（这是违反直觉的，被授予的）.这可能是你的问题的原因，但不幸的是，我无法告诉你确切的原因

解决这些微妙问题的下一步是连接到irc.mozilla.org#开发者，并在西海岸清醒时询问您的问题：）。
根据Gecko文档，应作为替代事件侦听器：

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

Firefox和Opera（Mini或desktop 12，在其下使用Presto引擎）支持此事件：

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

加载帧后，Opera会在所有者
iframe
上调度一个事件。然后该事件会出现在
窗口中

Firefox会在所有者
iframe
上的文档上发送事件。它会在
窗口中弹出
。该元素的目标是内容已加载的
iframe
。如果所有者文档本身包含在
框架中，则会向父文档发送事件。
事件目标
加载内容时的框架（依此类推到父文档链的顶部）

参考资料



没有区别。弹出窗口，但我在每个窗口中看到相同的3行调试输出-无
DOMContentLoaded！
或
readyStateChange
输出。尽管如此，请参见上面的更新-它在“实时XUL编辑器”中工作“。我看到其他只在Chrome权限下工作的东西，所以我不认为这是问题所在，但这可能是需要进一步调查的问题。正确的，如果你的代码在独立窗口中也不工作，那不是因为我想到的权限限制代码。
<?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