How to properly receive DOMContentLoaded event from XUL iframe?

Question

I am working on a minimal Firefox extension that loads a webpage in a XUL iframe. (I also tried html:iframe , but met identical results.) It may take a while for the page to load completely - and I'm trying to get the DOMContentLoaded event, which should appear before the load event.

(The main reason is that I am trying to introduce a CSS stylesheet, and this should be done immediately after the DOMContentLoaded event, instead of waiting for the page to be "unexplored" before the load event. It can also be used for other reasons, so the alternatives are specific for CSS are not a viable practice.)

However, so far I have been able to receive load events, not DOMContentLoaded or readyState .

The problem should be easily reproduced using the XUL below and just enter the XUL path in the Firefox location bar, given its URL chrome:// (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 that I get in the debug text box is:

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

I cannot understand why I am not getting any DOMContentLoaded! outputs DOMContentLoaded! or readystatechange:

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

The pages I linked to include:

• In XUL, how do I know if a browser tag has completed a download?
• Ways to circumvent a policy of the same origin
• https://developer.mozilla.org/en/DOM/element.addEventListener
• https://developer.mozilla.org/en/DOM/DOM_event_reference

I mentioned this on irc.mozilla.org/#extdev and was able to get the answer "Work for everyone else" and "Best use of listener capture." - that’s why I have a third useCapture argument set to true in all of the above addEventListener calls (although I haven’t noticed any difference with setting this value to false or without its full).

I am looking for the “right way” for this without resorting to polling on contentDocument.readyState .

Update: This and other similar examples work as expected when fetching through the "Real-Time XUL Editor" (part of https://addons.mozilla.org/en-US/firefox/addon/extension-developer/ ), but not when Download as chrome://test/content/test.xul file chrome://test/content/test.xul . Is it true that when loading through the location bar, there are limited privileges, etc. that cause this problem?

Answer 1

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

The DOMFrameContentLoaded event is fired when the frame has finished loading and parsing, without waiting for the stylesheets, images, and subframes to load. This event is similar to DOMContentLoaded, but applies only to frames.

Firefox and Opera (Mini or desktop 12 and under which the Presto Engine is used) support this event:

Firefox and Opera are currently implementing DOMFrameContentLoaded events.

When the frame is loaded, Opera dispatches the event to the iframe owner. This event then bubbles up to window .

Firefox sends the event to the document to the iframe owner. He bubbles up on the window . The purpose of this element is an iframe whose contents are loaded. If the owner document itself is contained in frame , the event is sent to the parent document. event target is still a frame when the content is loaded (and so on at the beginning of the main chain of documents).

References

• Webkit Bug 33604 - iframe.contentWindow not starting DOMContentLoaded (implements DOMFrameContentLoaded?)

Answer 2

Is there a problem opening the XUL page through Firefox> Web Developer> Error Console> open("chrome://yourpage.xul", "", "width=640,height=480"); ? The browser located below the location bar is marked as the main content, which makes the pages run there with limited privileges, regardless of the protocol the page comes from (this contradicts intuition, provided). This may be the cause of your problem, but I cannot tell you the exact reason, unfortunately.

The next step for such delicate questions includes connecting to the irc.mozilla.org # developers and asking about your problem when the west coast awakens :).