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

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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
body-onload-output
Console Output:
body-onload-console

Method 2: 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
window-onload-output
Console Output:
window-onload-console



My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.