Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Call JavaScript Function on Page Load
This tutorial will teach us to call a JavaScript function on page load. In many cases, while programming with HTML and JavaScript, programmers need to call a function, while loading the web page or after the web page load finishes. For example, programmers need to show the welcome message to the user on page load, and the programmer needs to call a JavaScript function after the page load event.
There are various ways to call a function on page load or after page load in JavaScript, and we will look at them one by one in this tutorial.
Using the onload event in the <body> tag
Using the window.onload Event
Using the DOMContentloaded Event
Using the onload event in the <body> tag
The first approach for calling a function on the page load is the use an onload event inside the HTML <body> tag. As you know, the HTML body contains the entire content of the web page, and when all HTML body loads on the web browser, it will call the function from the JavaScript.
Syntax
Follow the below syntax to use onload event in the <body> tag.
<body onload = "functionToCall()" > // HTML content </body>
Example
In the below example, we have created the JavaScript function named welcomeFunction(). We are calling that function from the <body> tag using the onload event, and it shows the welcome message in the alert box to the users.
<!DOCTYPE html>
<head>
<title> Call JavaScript function on page load. </title>
</head>
<body onload = "welcomeFunction()" >
<h2> Methods to call a JavaScript function on page load. </h2>
<h4> Call the JavaScript function on page load by using <i> onload </i> event in the HTML body tag. </h4>
<div id="message"></div>
<script type="text/javascript">
let message = document.getElementById("message");
function welcomeFunction() {
alert( "welcome to the tutorialsPoint!" );
message.innerHTML = "Function executed successfully on page load."
}
</script>
</body>
</html>
When users run the example code, they will give the welcome message in the alert box. When function execution completes, users will get the above output message.
Using the window.onload Event in JavaScript
Here, we have a second approach for calling the function on page load in JavaScript. Every web page contains the window object by default, and the window object represents the global variables. We can access any global variable or function in JavaScript using the window object. In this approach, we will use the onload property of the window object.
By using the window.onload property, users can either call a named function or bind an anonymous function to the window.onload and all code inside the anonymous function will be executed after the page load.
Syntax
Users can follow the below syntax to use the window.onload to call a function on page load.
Syntax for anonymous function.
Window.onload = function {
// code to execute on the page load
}
Syntax for named function.
Function simpleFunction ( ) {
// function body
}
Window.onload = simpleFunction( );
Example
In the below example, we are calling the named function on the page load using the window.onload property.
<html>
<head>
<title> Call JavaScript function on page load. </title>
</head>
<body>
<h2> Methods to call a JavaScript function on page load. </h2>
<h4> Call the JavaScript function on page load by using <i>window.onload</i> event in the JavaScript. </h4>
<div id="message"> </div>
<script type="text/javascript">
window.onload = simpleFunction( 10, 20 ); // call function with parameters on page load
function simpleFunction( num1, num2 ) {
alert(" The sum of num1 and num2 is " + ( num1 + num2 ) );
message.innerHTML = "Showing the message after alert box."
}
</script>
</body>
</html>
Using the DOMContentLoaded Event
JavaScript has a cool feature of the event listener, and users can call a function or perform some operation when any event triggers. In this approach, we will use the "DOMContentloaded" event. We will call the desired function using the addEventListener() method in JavaScript. Also, we will apply the event listener to the whole document such that we can call a function on the page load.
Syntax
To call the DOMContentLoaded event, users can follow the below syntax.
document.addEventListener("DOMContentLoaded", function() {
// function body
});
Example
The below example demonstrates the use of the DOMContentLoded event to trigger a function call on the page load.
<html>
<head>
<title> Call JavaScript function on page load. </title>
</head>
<body>
<h2> Methods to call a JavaScript function on page load. </h2>
<h4> Call the JavaScript function on page load by using <i>document.addEventListener( ) </i>method.</h4>
<div id="message"></div>
<script type="text/javascript">
let message = document.getElementById("message");
document.addEventListener( "DOMContentLoaded", functionCall());
function functionCall() {
alert( "function call on the page load." );
message.innerHTML = "Function body executed successfully on page load."
}
</script>
</body>
</html>
Users will also see the alert box with the message when the function will be executed.
Conclusion
Here, we have defined three approaches to trigger a function call on the page load. The first approach we can use inside the HTML code, the second one in the JavaScript code, and the third approach is the best approach to achieve our goal.
Furthermore, users can change the event in the third approach to trigger a function on a particular event. One more thing in the last approach is rather than triggering the event listener to the whole document, users can apply it to a specific HTML element also.
60K+ Views
