Search code examples
javascriptdomfirefox-addondom-eventsxul

How to properly receive the DOMContentLoaded event from an XUL iframe?

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.

(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.)

However, so far, I'm only able to receive the load event - and not the DOMContentLoaded nor the readyState events.

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

I can't figure out why I don't receive any DOMContentLoaded! or readystatechange: outputs.

Another minimal example that also doesn't work is available at https://gist.github.com/2985342.

Pages I've already referenced include:

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

I'm looking to do this "the right way", without resorting to polling on contentDocument.readyState.

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?

Solution

  • According to the Gecko documentation, DOMFrameContentLoaded should work as an alternative event listener:

    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 and Opera(Mini or desktop 12 and under which use the Presto Engine) support this event:

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

    References