Correct JavaScript equivalent for

Question

What is the correct JavaScript way to replacement <body onload="init();">, bearing in mind that we no-longer have need to support very old browsers.

In my case I want to add a onClick event to all tags and would like to keep the Javascript separate to my HTML page.

window.onload = init();

Started off with this but found the global document object is not available inside init(), this seems to be it seems to be a timing issue. Did it work better in older browsers?

document.addEventListener("DOMContentLoaded", init, false);

Seems to be a more modern reliable way but is this supported by all modern browsers?

Then there is the suggestion to just put the init() at the bottom of the page but that is obviously getting back to having the Javascript direct in the HTML.

<script type="text/javascript">init();</script>

Is there a definitive way I should be running my init code?

there is no definitive way, but why not just use jquery, which hides all of the per-browser variations for you? `$(document).ready(....)` works essentially everywhere jquery does, and jquery itself opens up a whole world of MUCH simpler coding than rolling your own JS stuff. — Marc B, Aug 25 '16 at 14:31
Actually both are wrong. `init()` will call the function immediately, use function reference `init`. (**No `()`**) — Tushar, Aug 25 '16 at 14:31
Do you mean `document.addEventListener("DOMContentLoaded", init, false);` ? — Rayon, Aug 25 '16 at 14:31
Yep, looks like I may have been causing problems by including () which could be the reason the document object was not available, I was possibly running the init before the real window.onload event. — NickC, Aug 25 '16 at 14:39
I agree, jQuery is really the best, it solves all kinds of browser problems and is good, as well — Scott, Aug 25 '16 at 14:48
jQuery isn't really needed, a self invoking function at the end of the body does the same. Though jQuery is great crossbrowser stuff without worries. — seahorsepip, Aug 25 '16 at 14:56
Thanks Tushart and Rayon. Just tested without the extra brackets and the original window.onload is now working properly. Those brackets were my problem all along. — NickC, Aug 25 '16 at 14:57
Nothing wrong with it but I would need to add it to every page. At the moment each page already links to a .js file so if I could do it from there it would stop me from having to edit every page. — NickC, Aug 25 '16 at 15:22

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

I think what you want is $(function(){}), or $(document).ready(...), as Marc B mentioned. That seems to accomplish what you're asking for, unless I'm misunderstanding your question. The jQuery API backs this up.

The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 25 '16 at 14:35

Michael Armes

1,056
2
17
31

seahorsepip · Answer 2 · 2016-08-25T16:20:57.627

0

Most simple method is adding a script tag at the end of body with a self invoking anonymous function:

<body>

<!-- content here -->

<script type="text/javascript">
(function() {
    //Run init code here
})();
</script>
</body>

For external js files:

<body>

<!-- content here -->

<script src="main.js" type="text/javascript"></script>
</body>

main.js file:

(function() {
    //Run init code here
})();

edited Aug 25 '16 at 16:20

answered Aug 25 '16 at 14:48

seahorsepip

4,519
1
19
30

That would work but I really wanted to keep the JavaScript out of the HTML is at all possible. – NickC Aug 25 '16 at 15:20
Then add the ``src`` attribute to the script tag and wrap the code in the js file in a self invoking anonymous function. – seahorsepip Aug 25 '16 at 16:19

score -1 · Answer 3 · answered Aug 25 '16 at 15:05

Now that the problem of the extra brackets has been solved the final solution which I am just about to test is:

if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init);
} else {
  window.onload = init;
}

I know JQuery can do this with it's .ready event but some of these pages are very small pages of Ajax content and I would prefer to avoid the overhead of JQuery if it is not necessary.

Correct JavaScript equivalent for

3 Answers3