Execute JS on page load without using jQuery

Question

So I know that if you use jQuery you can use $(document).load(function(){}); so that any code you write into the function gets executed after the whole page has loaded, but is there a way of doing something similar if you don't use jQuery and just use JS?

For example...

<html>
    <head>
        <script type="text/javascript">
            var box = document.getElementById('box');
            alert(box);
        </script>
    </head>
    <body>
        <div id="box" style="width:200px; height:200px; background-color:#999; 
margin:20px;"></div>
    </body>
</html>

If I use this method the alert just says null. So is there a way of making the js code run once the page has loaded?

Actually, when using jQuery, please do not use $(document).load(function(){...}); — adeneo
– adeneo, Commented May 25, 2013 at 20:09
This question might have an answer that you need http://stackoverflow.com/questions/799981... — Tafadzwa Gonera
– Tafadzwa Gonera, Commented May 25, 2013 at 20:14

Nile · Accepted Answer · 2013-05-25 20:11:25Z

15

I use:

<script type="text/javascript">
    window.onload = function(){
        //do stuff here
    };
</script>

This way you don't have to use any onload tags in your html.

answered May 25, 2013 at 20:11

Nile

1,5861 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1563944 Over a year ago

I like you way, 1 answer coming up when it lets me.

79IT · Accepted Answer · 2013-05-25 20:07:27Z

8

The easiest way is to simply put your script at the end of the document, typically just before the closing body tag:

<html>
<head>

</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div>
<script type="text/javascript">
    var box = document.getElementById('box');
    alert(box);
</script>
</body>

</html>

answered May 25, 2013 at 20:07

79IT

4254 silver badges9 bronze badges

2 Comments

user1563944 Over a year ago

so get the js to find the element #box the js tags have to go within the body section rather than within the head tag?

adeneo Over a year ago

@user1563944 - more specifically, the javascript has to come after the element you're trying to access, otherwise the element does'nt exist when the javascript executes.

Anish Gupta · Accepted Answer · 2013-05-25 20:23:33Z

4

You can use a variety of methods to accomplish this.

The simplest, easiest method would be to simply add the script tag at the end of your body tag:

<html>
<head>
    <title> Example </title>
</head>
<body>
    <div>
        <p>Hello</p>
    </div>
    <script type="text/javascript">
        // Do stuff here
    </script>
</body>
</html>

The way jQuery does it is something similar to:

window.onload = function() {
    // Do stuff here
}

I usually just do it the second way, just in case.

To ensure cross-browser compatibility, crawl through the source of jQuery and find what they use.

edited May 25, 2013 at 20:23

answered May 25, 2013 at 20:18

Anish Gupta

2,2263 gold badges23 silver badges37 bronze badges

Comments

Robbert · Accepted Answer · 2013-05-25 20:09:57Z

2

You can use onload in your body tag.

<head>
   <script type="text/javascript">
      function doSomething() {
         //your code here
      }
   </script>
</head>
<body onload="doSomething()">

answered May 25, 2013 at 20:09

Robbert

6,6226 gold badges38 silver badges64 bronze badges

Collectives™ on Stack Overflow

Execute JS on page load without using jQuery

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related