ziesemer ziesemer - 2 months ago 32
Javascript Question

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?

Answer

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)

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 dispatch an event on the document on the owner iframe. It bubbles to the window. Target of that element is the iframe whose content has loaded. If the owner document is itself contained in a frame, a 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