javascript - How to properly receive the DOMContentLoaded event from an XUL iframe? - Stack Overflow

admin管理员组

文章数量:1024614

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 pletely - and I'm trying to receive the DOMContentLoaded event, which should e 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=""
        xmlns=".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="" 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: plete

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 .

Pages I've already referenced include:

• In XUL, how do I know a browser-tag has finished loading?
• Ways to circumvent the same-origin policy
• .addEventListener

I've mentioned this on irc.mozilla/#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 /), 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?

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 pletely - and I'm trying to receive the DOMContentLoaded event, which should e 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/1999/xhtml"
        xmlns="http://www.mozilla/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." 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: plete

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./2985342.

Pages I've already referenced include:

• In XUL, how do I know a browser-tag has finished loading?
• Ways to circumvent the same-origin policy
• https://developer.mozilla/en/DOM/element.addEventListener
• https://developer.mozilla/en/DOM/DOM_event_reference

I've mentioned this on irc.mozilla/#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/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?

• javascript
• dom
• firefox-addon
• dom-events
• xul

Share Improve this question Follow edited Jul 12, 2019 at 21:31 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 24, 2012 at 1:30 ziesemerziesemer 28.7k99 gold badges8888 silver badges9595 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +100

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

• Webkit Bug 33604 - iframe.contentWindow doesn't fire DOMContentLoaded (implement DOMFrameContentLoaded?)

Does the issue happen when you open your XUL page through the Firefox menu > Web Developer > Error Console > open("chrome://yourpage.xul", "", "width=640,height=480");? The browser that is beneath the location bar is marked as content-primary, which makes the pages in there run with restricted privileges, regardless of the protocol that the page is ing from (this is counter-intuitive, granted). It could be what's causing your issue, but I'd be unable to tell you the exact reason why, unfortunately.

The next step for such subtle issues involves connecting to irc.mozilla#developers and asking about your problem when the west coast is awake :).

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 pletely - and I'm trying to receive the DOMContentLoaded event, which should e 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=""
        xmlns=".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="" 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: plete

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 .

Pages I've already referenced include:

• In XUL, how do I know a browser-tag has finished loading?
• Ways to circumvent the same-origin policy
• .addEventListener

I've mentioned this on irc.mozilla/#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 /), 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?

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 pletely - and I'm trying to receive the DOMContentLoaded event, which should e 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/1999/xhtml"
        xmlns="http://www.mozilla/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." 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: plete

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./2985342.

Pages I've already referenced include:

• In XUL, how do I know a browser-tag has finished loading?
• Ways to circumvent the same-origin policy
• https://developer.mozilla/en/DOM/element.addEventListener
• https://developer.mozilla/en/DOM/DOM_event_reference

I've mentioned this on irc.mozilla/#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/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?

• javascript
• dom
• firefox-addon
• dom-events
• xul

Share Improve this question Follow edited Jul 12, 2019 at 21:31 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 24, 2012 at 1:30 ziesemerziesemer 28.7k99 gold badges8888 silver badges9595 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +100

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

• Webkit Bug 33604 - iframe.contentWindow doesn't fire DOMContentLoaded (implement DOMFrameContentLoaded?)

Does the issue happen when you open your XUL page through the Firefox menu > Web Developer > Error Console > open("chrome://yourpage.xul", "", "width=640,height=480");? The browser that is beneath the location bar is marked as content-primary, which makes the pages in there run with restricted privileges, regardless of the protocol that the page is ing from (this is counter-intuitive, granted). It could be what's causing your issue, but I'd be unable to tell you the exact reason why, unfortunately.

The next step for such subtle issues involves connecting to irc.mozilla#developers and asking about your problem when the west coast is awake :).

本文标签： javascriptHow to properly receive the DOMContentLoaded event from an XUL iframeStack Overflow