How to determine if your Javascript is enabled synchronously or asynchronously

Question

I am trying to determine if the current Javascript executable is enabled synchronously (via a regular script tag)

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

or asynchronously by inserting a script element into the DOM programmatically, something like

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

and therefore whether it can be used document.writeor not. I figured out a crazy solution that checks if it works document.write, see this point .

Basically, it works using an document.writeelement to write - I selected an empty script tag. He then queries the DOM to determine if this script element has been successfully written. If it was - the script should be included synchronously, if it was not - it was included asynchronously.

This solution works in all browsers that I have tested so far (all major ones, including IE7 +), with the exception of Opera.

Question: is there a better solution?

Note. I also tried checking document.readyState, but this does not seem to be useful in IE.

Also note: I do not need a lecture, which document.writeis evil. I know.

Update: it turns out that in addition to what does not work in Opera, my technique is also unreliable in some cases in IE and other browsers - it document.writemay or may not work depending on the synchronization or caching scenario. spec seems to say the same.

Answer 1

This is evil, but you can override the functions of the document and write your own. something like that:

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);
}

, script , ,

Answer 2

, JS URL- , , script.

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

, , "src" script, .

Answer 3

, . , DOMContentLoaded , , , . script , "" . , ( "" ).

Again, quick and dirty: in your html file, create a script tag in your head; To be compatible with multiple browsers, I believe that it should be the first script tag in your html file (note: window.DOMready false 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 the window.DOMready property. If true, your script has been loaded asynchronously. Example:

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

Enjoy it!