Cannot access functions in external JavaScript

Forever Zero

06-18-2008, 04:39 PM

Hi again :)

I'm having a new problem this time...

Basically, I found a way to load an external JavaScript hosted on my server into a webpage. The problem is, when I try and call testFunction() in the test web page, it gives me an error that states:
testFunction is not defined

The code I use for this is:

<html>

<head>
<title> Test Page </title>
</head>

<body>
<script language="javascript">
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://foreverzero.org/test.js';
head.appendChild(script);
script.onreadystatechange = function () {
if (this.readyState == 'complete') testFunction();
}
script.onload = testFunction();
</script>
<p> Woooooooooo </p>
</body>

</html>

Here is test.js (the external script that I am trying to load):

addEventListener(
"load",
function(event) {
alert("load event listener");
},
false
);

function testFunction() {
alert("It worked!");
}

testFunction();

I know it is loading the script for two reasons. The first is that when I load the test page above, the status bar says "transfering data from foreverzero.org" (the test page is not located on that domain name). The second is that the load event listener goes off, and so does the "it works!" alert when I call testFunction() on the very last line.

I cannot figure out why calling testFunction() from the test HTML page will not work. Any advice or ideas is greatly appreciated, I have been struggling with this nearly all week now :(

rnd me

06-18-2008, 06:00 PM

here is your problem: you are assigning testFunction() to the onload, BEFORE the script has loaded, and thus testFunction has loaded as well.

the onload must be firing before the code is ready.

not sure how to fix this, but there you go...

subsequent calls to testFunction() from the page are fine.

Forever Zero

06-18-2008, 06:04 PM

Hmm, thanks for pointing that out.

My only idea to to create a recursive function that sets a timer to check if the script has loaded.

EDIT: I did something dumb....1 second heheh

rnd me

06-18-2008, 06:34 PM

you could do something like that, but assign a global variable as the last line in your external script, and monitor that variable. that will be more consistent across browsers.

eg: loadedExternal = true;

Forever Zero

06-18-2008, 06:41 PM

For anyone wondering, what I did here seemed to work fine:

<script language="javascript">
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://foreverzero.org/test.js';
head.appendChild(script);
function waitForLoad() {
if(typeof testFunction != 'function') {
var t=setTimeout("waitForLoad()",500);
} else {
testFunction();
}
}
waitForLoad();
</script>

What do you mean exactly by a global variable to monitor? Do you mean for example, in my code above, instead of calling testFunction() in the else{}, that I could set a variable named something like"isLoaded" to true instead, and just use that to check if the script is loaded whenever I need to?

rnd me

06-19-2008, 03:28 AM

kinda. i mean actually place a var declaration at the last of your script.
when the external script finishes, that variable is the last thing it changes.

your timeout then tests for the var.

something like:

if(window.loadedExternal){ testFunction(); } else { setTimeout("waitForLoad()",500); }

this speeds up the check, ensures compatibility in any browser, and simplifies coding.

you might even be able to get away with killing the timeout check,
by simply putting "testFunction()" as the last line of the external script. (depends on your usage).

Forever Zero

06-19-2008, 05:30 PM

Ahhh that makes sense now.

Thanks a lot, really helped me out :P

Trinithis

06-19-2008, 07:43 PM

I would avoid loadedExternal and simply test from the existence of testFunction.

(function() {
if(testFunction)
testFunction();
else
setTimeout(arguments.callee, 500);
})();

you might even be able to get away with killing the timeout check,
by simply putting "testFunction()" as the last line of the external script. (depends on your usage).

I think this is probably the best route if you can use it.

Forever Zero

06-19-2008, 07:47 PM

Thanks for the extra info.

Unfortunately, I can't use that method (man would that have made my life easier...)

I made a new thread just now explaining my new issue with this (it was a different topic even though it is for the same script). Basically, I need to use this method to load multiple scripts.