I have a JS script that will be hosted on my server and that others will embed in their html, i.e.

...<code for  />
<script type="text/javascript" src=".js" />
...<code for  />

My script declares an object with a bunch of properties accessible for use as a Javascript Object(), i.e.

<script type="text/javascript">
//From .js
alert(Awesome.Name);
</script>

Due to the load time variance, it seems I need to signal that the "Awesome" object in my script is ready. I need this to stand on its own, so no dependencies on specific JS frameworks.

Do I need to publish my own custom JS event, or does the simple fact that my script is loaded get captured by one of the existing page-level events? How else should I be doing this?

UPDATE: as a point of reference, if I include the JS in an HTML page running from , the Awesome object is available and populated. When the JS file is included from another domain, the object is undefined at runtime.

I have a JS script that will be hosted on my server and that others will embed in their html, i.e.

...<code for http://yoursite.example. />
<script type="text/javascript" src="http://mysite.example./awesome.js" />
...<code for http://yoursite.example. />

My script declares an object with a bunch of properties accessible for use as a Javascript Object(), i.e.

<script type="text/javascript">
//From http://mysite.example./awesome.js
alert(Awesome.Name);
</script>

Due to the load time variance, it seems I need to signal that the "Awesome" object in my script is ready. I need this to stand on its own, so no dependencies on specific JS frameworks.

Do I need to publish my own custom JS event, or does the simple fact that my script is loaded get captured by one of the existing page-level events? How else should I be doing this?

UPDATE: as a point of reference, if I include the JS in an HTML page running from http://mysite.example., the Awesome object is available and populated. When the JS file is included from another domain, the object is undefined at runtime.

• javascript
• dom-events
• unobtrusive-javascript

• Sorry, word choice. Publishes? Emits? Declares? Fires? Not sure what the appropriate vernacular is in this case -- javascript is not my normal area of development. – jro Commented Feb 24, 2009 at 17:33

5 Answers 5

The javascript content of <script> tags is executed procedurally, so this

<script type="text/javascript" src="http://mysite./awesome.js" />
<script type="text/javascript">
    alert(Awesome.Name);
</script>

will only alert the contents of Awesome.Name if found in any previous script tag.

To understand if everything has been fully loaded on the page, you have to use the DOMContentLoaded, for firefox, and "onreadystatechange" for ie. Also you can simply check the load event on the window object if you don't care about checking the DOM (could be easier).

if ( document.addEventListener ) {
    document.addEventListener( "DOMContentLoaded", function(){
         doSomething();   
    }, false );
} else if ( document.attachEvent ) { // IE        
    document.attachEvent("onreadystatechange", function(){
        if ( document.readyState === "plete" ) {
            doSomething();
        }
    });
}

If your script needs the DOM to be loaded before your object is instantiated, you should look at some frameworks and see how they handle this, then implement it in your code. If you don't need the DOM to be loaded, then I would let the user worry about the timing of using your object based on when it is loaded. Generally, your object should be available to be be used as soon as your script has been loaded, which means that the object ought to be available right after the script tag that includes it.

Anything accessible in the global scope can be accessed through the window scope. Hence, you could use this:

if (window["Awesome"] != null) { /* do something */ }

A). You realise that script requests are blocking? Are you ok with this or do you want to work around that, because the answer to your question depends on it.

B). Bare bones bulletproof and simple mechanism is to call a specified method which you can guarantee exists on the page. Let that methods implementation be up to the user to do what it will. Lots of other ways exist but we'd need to know what exactly the lifecycle and intent of your code is to remend anything.

you can simply use it like this:

<script type="text/javascript" src="myfunction.js"></script>
<script type="text/javascript" src="iwannaloadthis.js?onload=executeThis"></script>

remember as pointed out earlier, execute this must be defined in myfunction.js (or before trying to load iwannaloadthis.js.

Hope this helps!!