Dynamically loading javascript

For WebDev 2, I will need to allow javascript to be dynamically downloaded.
This is not to hard at all, using document.createElement("script"). But I need to know that the new js source has been downloaded, since "<script src=""> pull the src asynchronously.
One wanted to use the onload attribute of the script tag but it only seemed to work in FF and not IE.
I'm thinking that the only option is to append some event notifying code to the end of the dynamically pulled script to notify and call a function.

Does anyone know any other way of doing this?

Adam Kinney blogged about adding javascript dynamically

Maurits wrote:

Adam Kinney blogged about adding javascript dynamically

Hi,

when i need to do that, i use a hidden frame that i load with the javascript functions i need. Then i call the functions from the frame.

Hope it helps
Paulo Correia

Something like:

var scriptelement;
scriptelement = document.createElement("script");
scriptelement.setAttribute("src", "http://giveyoursourceurl");
document.appendChild(scriptelement);

The typical way of doing this (this is VERY common) is that you just take the ECMAScript (JavaScript the old term) as a string either from a remote procedure call or whatever and run an eval() on it.

The proper way of having something load on page load is to add an event listener to the load event for the window.

window.addEventListener('load', function(evt) {
// anonymous method
, false);

That's for W3C systems, for the proprietary IE 6 (and earlier) you use...

window.attachEvent('onload', function(evt) {
// anonymous method);

See my code at the following link for the unified version...

http://davidbetz.net/lib/events.js

You can then have methods (think of them as delegates, really) calls as you need.

<script type="text/javascript">
addEvent(window, 'load', MyLoadMethod, false);
</script>

Then either

function MyLoadMethod(evt) {
}

or

var MyLoadMethod = function(evt) {
};

will work.

Keep any code you want to load in the method assigned to myLoadMethod... you cannot access objects on a page until they exist. That is AFTER the ECMAScript has run on the page. So it's safest to keep your Page_Load (to use a .NET term) code in the MyLoadMethod method.

This is the garunteed way to have your code run.

David Betz

...and if you want to load something and have it run, think callback functions. It was in JavaScript many, many years ago...but doing a slight redesign and thinking about eval( ) may be better for you.

In IE use onreadystatechange instead of onload.
In the event handler test for readyState == 4 to find when your script has really loaded.

davidbetz wrote:

The typical way of doing this (this is VERY common) is that you just take the ECMAScript (JavaScript the old term) as a string either from a remote procedure call or whatever and run an eval() on it.

The proper way of having something load on page load is to add an event listener to the load event for the window.

window.addEventListener('load', function(evt) {
// anonymous method
, false);

That's for W3C systems, for the proprietary IE 6 (and earlier) you use...

window.attachEvent('onload', function(evt) {
// anonymous method);

See my code at the following link for the unified version...

http://davidbetz.net/lib/events.js

You can then have methods (think of them as delegates, really) calls as you need.

<script type="text/javascript">
addEvent(window, 'load', MyLoadMethod, false);
</script>

Then either

function MyLoadMethod(evt) {
}

or

var MyLoadMethod = function(evt) {
};

will work.

Keep any code you want to load in the method assigned to myLoadMethod... you cannot access objects on a page until they exist. That is AFTER the ECMAScript has run on the page. So it's safest to keep your Page_Load (to use a .NET term) code in the MyLoadMethod method.

(notice the delegate signature of having an evt parameter)

This is the garunteed way to have your code run.

David Betz

http://www.davidbetz.net/dynamicbliss/ http://www.davidbetz.net/winfx/