.js file not loading in time for function call, problem only in Netscape/Mozilla/Firefox

D

danny.myint

I was under the assumption that javascript loads all the <head></head>
elements before processing the <body> tag in Mozilla/Netscape/Firefox.
It doesn't seem like it, with my problem.

I have navigation that has onMouseOver and onMouseOut triggers, that
use function calls in my external .js file. When I mouseOver a button
in my navigation quickly enough to catch it before the rest of the body
loads, it returns a function "not defined" error. The function is
definitely defined in my .js file. If I wait for the whole page to
load, and try mousing over and out of my nav, I don't get that error.

I don't have this problem with IE.
Any help would be much appreciated.
Danny
 
M

Martin Honnen

I was under the assumption that javascript loads all the <head></head>
elements before processing the <body> tag in Mozilla/Netscape/Firefox.
It doesn't seem like it, with my problem.

I have navigation that has onMouseOver and onMouseOut triggers, that
use function calls in my external .js file. When I mouseOver a button
in my navigation quickly enough to catch it before the rest of the body
loads, it returns a function "not defined" error. The function is
definitely defined in my .js file. If I wait for the whole page to
load, and try mousing over and out of my nav, I don't get that error.
Click to expand...

URL? And if it has lots of content describe what your navigation buttons
are.
 
G

Grant Wagner

I was under the assumption that javascript loads all the <head></head>
elements before processing the <body> tag in Mozilla/Netscape/Firefox.
It doesn't seem like it, with my problem.
Click to expand...

The contents of the <head></head> are processed, it does not mean that
the external script file referred to by <script type="text/javascript"
src="yourfile.js"></script> has been downloaded and parsed before the
<body> is rendered. These events happen asynchronously, yourfile.js can
be downloading while the <body> is being rendered.

As a result, you need to do something to test before dispatching to the
function defined in the external file.

<head>
<script type="text/javascript" src="yourfile.js"></script>
<script type="text/javascript">
function safeRedirector(f, args) {
if ('undefined' == typeof f) {
alert('The code needed to support that is not yet loaded');
} else {
f(args);
}
}
</script>
</head>
<body>
<a href="..."

onmouseover="safeRedirector(yourMouseOverFunctionDefinedInYourFileDotJs,
[ arg1, arg2, arg3 ]);">Link</a>

Or maybe:

<head>
<script type="text/javascript" src="yourfile.js"></script>
<script type="text/javascript">
var bodyLoaded = false;
function safeRedirector(f, args) {
if (bodyLoaded) {
f(args);
} else {
alert('The code needed to support that is not yet loaded');
}
}
</script>
</head>
<body onload="bodyLoaded = true;">
<a href="..."

onmouseover="safeRedirector(yourMouseOverFunctionDefinedInYourFileDotJs,
[ arg1, arg2, arg3 ]);">Link</a>

You can set up safeRedirector() to be a little more transparent
(actually passing parameters instead of requiring they be part of an
array) I just didn't have the time to write all that.

The other thing to do is not have a single generic redirector, but to
have 'stub' functions for each of your main handlers that dispatches to
it if it's available.

Lastly, you could not define your events in the HTML, but instead attach
them to the elements dynamically. Define the function in your external
js file:

function setAllHrefMOut(f, d, inLayer) {
if (!inLayer) {
d = document;
}

if (d) {

var i;

if (d.links) {
i = d.links.length;
while (i-- > 0) {
if (!d.links.onmouseout) {
d.links.onmouseout = f;
}
}
}

if (d.layers) {
i = d.layers.length;
while (i-- > 0) {
setAllHrefMOut(f, d.layers.document, true);
}
}
}
} // setAllHrefMOut()

Then call it -onload-:

<body onload="setAllHrefMOut(someFunction);">
 
E

ExGuardianReader

I was under the assumption that javascript loads all the <head></head>
elements before processing the <body> tag in Mozilla/Netscape/Firefox.
It doesn't seem like it, with my problem.

I have navigation that has onMouseOver and onMouseOut triggers, that
use function calls in my external .js file. When I mouseOver a button
in my navigation quickly enough to catch it before the rest of the body
loads, it returns a function "not defined" error. The function is
definitely defined in my .js file. If I wait for the whole page to
load, and try mousing over and out of my nav, I don't get that error.

I don't have this problem with IE.
Any help would be much appreciated.
Click to expand...

You could specify that your <body> has a CSS attribute visibility:hidden.

Then the last line of your script file could overturn that. That way
there is nothing visible to mouseover during loading of the script.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I want to Display Excel As HTML In js 2
js file not loading in Firefox, Netscape 1
Only one table shows up with the information 2
Image upload not working in browser 4
Using JS to verify registration info? 1
Calculating totals in webpage using js. 1
Javascript form validation script- not defined in Mozilla Firefox 8
Object not found, included .js file not loading 1

Members online

No members online now.
Total: 30 (members: 2, guests: 28)
Robots: 218

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,024
Latest member
ARDU_PROgrammER

Latest Threads

Top