Open In App

How to run a function when the page is loaded in JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

A function can be executed when the page loads successfully. This can be used for various purposes like checking for cookies or setting the correct version of the page depending on the user’s browser.

Below are the approaches to run a function when the page is loaded in JavaScript:

Method 1: Using onload method:

The body of a webpage contains the actual content that is to be displayed. The onload event occurs whenever the element has finished loading. This can be used with the body element to execute a script after the webpage has completely loaded. The function that is required to be executed is given here.

Syntax:

<body onload="functionToBeExecuted">

Example: In this example, we have used onload method.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to run a function when the
        page is loaded in javascript ?
    </title>
</head>
 
<body onload="console.log('The Script will load now.')">
     
    <h1 style="color: green">GeeksforGeeks</h1>
     
    <b>
        How to run a function when the
        page is loaded in javascript ?
    </b>
     
    <p>
        The script has been executed. Check
        the console for the output.
    </p>
</body>
 
</html>


Output:

body-onload-output

Console Output:

body-onload-console

Method 2: Using window.onload

The window object represents the browser window. The onload property processes load events after the element has finished loading. This is used with the window element to execute a script after the webpage has completely loaded. The function that is required to be executed is assigned as the handler function to this property. It will run the function as soon as the webpage has been loaded.

Syntax:

window.onload = function exampleFunction(){
// function to be executed
}

Example: In this example, we have used window.onload

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to run a function when the
        page is loaded in javascript ?
    </title>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
     
    <b>
        How to run a function when the
        page is loaded in javascript?
    </b>
     
    <p>
        The script has been executed. Check
        the console for the output.
    </p>
     
    <script>
        window.onload = function exampleFunction() {
            console.log('The Script will load now.');
        }
    </script>
</body>
 
</html>


Output:

window-onload-output

Console Output:

window-onload-console

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.



Last Updated : 13 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads