i've created a script that works with the Dom so it has to wait until the Dom is ready before execute every operation. I want that this script can be included in two ways:

• In the head tag so that it is loaded before the Dom is ready. I've used document.addEventListener("DOMContentLoaded",function(){...},false) for this and it works well
• Loaded dinamically when the Dom is already loaded. In this case the script doesn't work because for some reasons if the Dom is already loaded the DOMContentLoaded event isn't fired

So i want to know, is there a way to check if the Dom is already loaded so that the script can execute the code without using the DOMContentLoaded event?

PS: this must be an external script so i have no control on the page where it will be included

i've created a script that works with the Dom so it has to wait until the Dom is ready before execute every operation. I want that this script can be included in two ways:

• In the head tag so that it is loaded before the Dom is ready. I've used document.addEventListener("DOMContentLoaded",function(){...},false) for this and it works well
• Loaded dinamically when the Dom is already loaded. In this case the script doesn't work because for some reasons if the Dom is already loaded the DOMContentLoaded event isn't fired

So i want to know, is there a way to check if the Dom is already loaded so that the script can execute the code without using the DOMContentLoaded event?

PS: this must be an external script so i have no control on the page where it will be included

• javascript
• events
• dom

5 Answers 5

Ok, this is cheesy but it should work: Wrap your external script in an init() method:

e.g. (and I'm just guessing here)

var myModule = {

    init: function {
        //all the code goes here
        /..
    }
 }

Then put your script import back into the head tag and at the very bottom of your DOM markup add a script tag

<script>
    myModule.init();
</script>

Again I wouldn't usually remend it but if you need to avoid checking the DOM loaded event that's what I'd do

You could set a global var saying that the script is dynamically being included, Depending on this you can fire the load listener when the script is being eval'd.

window.SCRIPT_IS_DYNAMICALLY_LOADED = true;
< include script>

In script:

if (window.SCRIPT_IS_DYNAMICALLY_LOADED) {
     domContentLoadedListener();
} else {
     document.addEventListener("DOMContentLoaded",domContentLoadedListener, false);
}

One of the easiest ways to do it would be to check if you can getElementById for something at the end of the page. Something like:

if (document.getElementById('footer')) { /* Dom is probably loaded */ }
else { /* Dom is probably NOT loaded */ }

But really, the best practice is probably to make sure that the code is always being called the same way. you could use an 'onload' event instead, as that will work in all browsers and is usually only a fraction of a second after the DOMContentLoaded event. But, I suppose that's really up to you.

Define your function: function domReadyHandler() { /* ... */ }

Add the event listener: document.addEventListener('DOMContentLoaded', domReadyHandler, false);

Execute the handler after dynamically loading your content, too: function myXhrCallback() { /* ... */; domReadyHandler(); }

Check the value for document.readyState. If the value is 'plete', you can execute the script, if it's something else, add the listener.