window.onload for executing as soon as page loads

Window Onload Window.onload function we can use to perform some task as soon as the page finishes loading. This JavaScript function is used in different condition like displaying a print page or directing focus ( keeping the crusher blinking ) to user input field as soon as the page is loaded.
JavaScript Window onload to execute script as soon as page loads and difference between body onload

Using body tag

The other way to achieve the same result is by using onload inside body tag of the page. You can read this article on how to keep the onload event handler to set the focus on input tag once the page loads.  

Let us start some simple example of uses of window.onload function where we will display one Alert box once the page loads.
demo of window onload event
Here is the script
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">

function my_code(){
alert(" Alert inside my_code function");
}

window.onload=my_code();
</script>

</head>
<body >


</body>
</html>
We can also achieve the same result by using onload event of body tag. Then what is the difference ?
<body onLoad="my_code()";>
Example : To keep the userid textbox on focus & selected ( time of loading of page )
<body onLoad="document.f1.userid.focus()";>

Difference between window.onload function and body tag onload.

wondow.onload is executed when full page is loaded to the browser ( including all images, style , scripts ,CDN etc )
document.onload is executed when DOM is ready ( Not necessarily all connected script, images etc to be downloaded )

We can't keep any code to access the property set or any other related objects of the elements present in body of the page by using window.onload function.

Say we want to select the text present inside a text box as soon as the page loads. This is not possible by using window.onload event but this is possible by using body onload command. The code below will generate error message.
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">

function my_code(){
alert(" Alert inside my_code function");
var text_val = document.getElementById("t2"); 
text_val.select();
}

window.onload=my_code();
</script>

</head>
<body >

<form name=form1 method=post action=''>
<input type=text name=t1 value=plus2net id="t2">
</form>

</body>
</html>
The above code won't work and you can see the error message in your JavaScript console. To make this code work we have to change the window.onload command.
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">

function my_code(){
alert(" Alert inside my_code function");
var text_val = document.getElementById("t2"); 
text_val.select();
}
//window.onload=my_code();
</script>

</head>
<body onload=my_code()>
<form name=form1 method=post action=''>
<input type=text name=t1 value=plus2net id="t2">
</form>

</body>
</html>

Questions

Window object Reference Window prompt window for input data
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Amar

    27-11-2014

    Both codes above in comparison are same.
    Azim

    24-06-2015

    Thank You so much
    diya

    01-02-2016

    I did not understand the difference, when onload is in body and head, if it is head noticed that i should be giving "window.onload=my_code();" but for the body i should be giving window.onload=my_code;

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer