homepage Welcome to WebmasterWorld Guest from 23.23.8.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
wait for page load
Champak

5+ Year Member



 
Msg#: 3301626 posted 1:16 am on Apr 4, 2007 (gmt 0)

Is it possible to do a script that wont take an action until the page is loaded WITHOUT touching the <body> tag with the onload function? I've seen and have many scripts that require the edit of the bodyonload, but for what I'm doing, I can't touch it. So it all has to be within the script.

Or is this something for php

 

Trace

5+ Year Member



 
Msg#: 3301626 posted 1:59 pm on Apr 4, 2007 (gmt 0)

<body onload="init()">

is the same as doing;

<script>
window.onload = init;
</script>

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3301626 posted 5:36 pm on Apr 4, 2007 (gmt 0)

Note, however, that if your page's <body> tag already has an onload attribute, then it will overwrite your window.onload.

Example 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Onload Test 1</title>
<script type="text/javascript">
window.onload = function() {
alert('new school');
}
</script>
</head>
<body onload="alert('old school');">
</body>
</html>

In the above example, the 'new school' alert will never happen. If you remove the onload attribute from <body>, though, you'll see it work.

Example 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Onload Test 2</title>
<script type="text/javascript">
window.onload = function() {
alert('new school');
}
</script>
</head>
<body>
</body>
</html>

In that example, the 'new school' alert will happen.

A better alternative is to "attach" a listener to the onload event, instead of defining a "handler". I find the easiest way to do that is using the Yahoo UI Library [developer.yahoo.com]'s Event Utility [developer.yahoo.com]:

Example 3:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Onload Test 3</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/event/event-min.js" ></script>
<script type="text/javascript">
YAHOO.util.Event.on(window,'load',function(){alert('Best school');});
window.onload = function() {
alert('new school');
}
</script>
</head>
<body onload="alert('old school');">
</body>
</html>

That example uses the files served directly from Yahoo, but you could also download them and serve them from your site. This example shows that the 'Best school' alert will still be called, despite the body onload attribute (the window.onload is still not called because it's overwritten).

Hope this helps.

[edited by: Fotiman at 5:37 pm (utc) on April 4, 2007]

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3301626 posted 6:15 pm on Apr 4, 2007 (gmt 0)

You have to use one of the most useful functions in the world:

First reference your script externally in the HEAD:


<head>
<script type='text/javascript' src='myscript.js'></script>
</head>

That's all the code you need in your HTML, now in your script add this function:


function addEvent(elm, evType, fn, useCapture)
{
//Credit: Function written by Scott Andrews
//(slightly modified)

var ret = 0;

if (elm.addEventListener)
ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent)
ret = elm.attachEvent('on' + evType, fn);
elseelm['on' + evType] = fn;

return ret;
}

And finally at the end of your script file, the line that kicks it all off:


addEvent( window, "load", init);

Note though that that parameter *IS NOT* a function call, but a function so you can't use myMsg( "Hello!") for example.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved