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, May 25 '13 at 20:09
This question might have an answer that you need [http://stackoverflow.com/questions/799981...](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) — Tafadzwa Gonera, May 25 '13 at 20:14

score 14 · Accepted Answer · answered May 25 '13 at 20:11

14

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 '13 at 20:11

Nile

1,556
1
14
25

I like you way, 1 answer coming up when it lets me. – user1563944 May 25 '13 at 20:19

score 8 · Answer 2 · answered May 25 '13 at 20:07

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 '13 at 20:07

79IT

425
4
9

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? – user1563944 May 25 '13 at 20:14
@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. – adeneo May 25 '13 at 20:14

Anish Gupta · Answer 3 · 2013-05-25T20:23:33.977

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.

score 2 · Answer 4 · answered May 25 '13 at 20:09

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 '13 at 20:09

Robbert

6,286
5
30
58

Execute JS on page load without using jQuery

4 Answers4