如何检测您的Javascript是同步还是异步包含

Question

I am trying to detect whether the current Javascript file that's being executed is included synchronously (via a regular script tag)

<script src="myscript.js"></script>

or asynchronously via inserting a script element into the DOM programatically, something like

var script = document.createElement('script')
script.src = 'myscript.js'
document.body.appendChild(script)

and consequently whether document.write can be used or not. I've figured out a crazy solution which tests whether document.write works, see this gist .

Basically, it works by using document.write to write out an element - I chose an empty script tag. Then it queries the DOM to determine whether that script element was successfully written out. If it was - the script must have be included synchronously, if it wasn't - it was included asynchronously.

This solution works in all browsers I've tested so far (all major ones including IE7+) except for Opera.

The question is: is there a better solution?

Note: I have also tried checking document.readyState , but that does not appear to be helpful in IE.

Also note: I don't need a lecture that document.write is evil. I know.

Update: turns out that in addition to not working on Opera, my technique is also unreliable in certain cases in IE and other browsers - document.write may or may not work depending on timing or caching scenario. The spec seems to say as much.

Answer 1

this is evil but you could redefine the document functions and write your own. something like this perhaps:

var oldAppendChild = document.body.appendChild;

document.body.appendChild = function(child) {
    //examine if child is a script element, do stuff with it if it is
    //finally do what the original function did and:
    oldAppendChild(child);
}

of course you would need to handle all the different browser quirks and and all the different ways one could add a script element to the page, but it is an alternative to what you describe

Answer 2

If you have full control over all sides, you can use a dynamic server page for the JS and query parameters to the url as needed and then use that to set a variable inside the script.

var script = document.createElement('script');
script.src = 'myscript.php?type=asynch';
document.body.appendChild(script);

Might be possible to do this all client side by checking "src" attribute of the script element, but I'm not positive on that.

Answer 3

Well, here is a quick and dirty solution. We assume that if the DOMContentLoaded event has fired, the entire document including all scripts have been loaded. If your script is executed before that, it has been executed sort-of ' synchroneously ' by your definition. If it is executed afterwards, it has to be loaded through another way (' asynchroneously ').

Again, quick and dirty: In your html file create a script tag in your head; To be cross-browser compatible, I believe it has to be the first script tag in your html file (note: window.DOMready is falsey if undefined in modern browsers).

<script>
// this property by default is false
window.DOMready = false;

// all browsers but IE<8
// wait for the DOMContentLoaded event and set window.DOMready to true
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function () {
        window.DOMready = true;
    }, false);

} else {
    // not entirely accurate but functioning in IE<8
    // you may want to use another IE solution if you care
    window.onload = function () {
        window.DOMready = true;
    }
}
</script>

Then, in your script files you can check for the window.DOMready property. If true, your script has been loaded asynchroneously. Example:

// myscript.js
if (window.DOMready) {
    // we have been loaded asynchroneously
} else {
    // we have been loaded synchroneously
}

Enjoy!