Skip to content
Related Articles

Related Articles

Improve Article

Difference between window.onload and body.onload

  • Last Updated : 10 Feb, 2021
Geek Week

There is a slight difference between the windows onload and the body onload, but before approaching the differences between them first we required the knowledge of what are those onloads. After, that we will know the usage in different scenarios of those where we will notice the slight differences between them.

onloads: The onloads event is fired when an object is fully loaded, there are two types of onload event one is windows onload and body onload.

  1. Windows onload: This window’s onload event fires at the start.
  2. Body onload: This body onload event fires once all content is downloaded, if we want to find an element and update the style or content, then, body onload is the right choice to use.

Note: If update the style and content do not bother you then it does not matter which onload you are using.

The below example illustrates the differences between windows onload and body onload:

HTML




<!DOCTYPE html>
<html>
   <head>
   </head>
   <body onload="bodyLoad()">
      <div id="B1">
         <h1 style="color: green;">GeeksforGeeks</h1>
           
<p>A Computer Science Portal for Geeks</p>
  
      </div>
      <script>
          
        // Body onload
         function bodyLoad() {
             alert("Alert from body_onload");
             alert("content from d1: "
                   + document.getElementById("d1").innerText);
         }
           
         // Window onload 
         function winLoad() {
             alert("Alert from window_onload");
             if (document.getElementById("B1") != null) {
                 alert("Content from body: "
                       + document.getElementById("B1").innerText);
             }
             else {
                 alert("Failed to find B1");
             }
         }
         window.onload = winLoad();
      </script>
   </body>
</html>

Output:



  • Window onload:

  • Body onload:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :