window.onload to executes functions as the page loads in JavaScript

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>

Example: Handling Multiple onload Functions

<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">

function my_code(){
alert(" Alert inside my_code function");
  console.log("First onload function");
    secondOnload();
}
function secondOnload() {
    console.log("Second onload function");
}
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>

Example: Using addEventListener with onload

window.addEventListener("load", function() {
    console.log("This is triggered by addEventListener");
});

Explanation:
Multiple Onload Functions: Shows how to handle multiple `onload` functions in the same script.
Using `addEventListener: Demonstrates how to use `addEventListener` to attach multiple `onload` handlers.

Questions

What is the purpose of the window.onload event in JavaScript?
How do you assign a function to the window.onload event?
How can you execute multiple functions when the window.onload event occurs?
What happens if you assign a new function to window.onload after the page has finished loading?
Can you have more than one window.onload event handler on a single page?
How does the window.onload event differ from the DOMContentLoaded event?
Is it necessary to wait for the window.onload event before accessing or manipulating the DOM?
What are some common use cases for the window.onload event?
How can you detect if the window.onload event has already occurred?
How do you handle errors in functions assigned to the window.onload event?

Window object Reference Window prompt window for input data

Subscribe to our YouTube Channel here

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;

Amar	27-11-2014
Both codes above in comparison are same.

Azim	24-06-2015
Thank You so much

window.onload for executing as soon as page loads

Using body tag

Difference between window.onload function and body tag onload.

Example: Handling Multiple onload Functions

Example: Using addEventListener with onload

Questions