Geek Answers Handbook

Window.onload in an external script is ignored in Javascript

index.html

<html> <head> <script type="text/javascript" src="foo.js"></script> <script type="text/javascript"> window.onload = function() { console.log("hello from html"); }; </script> </head> <body> <div class="bar">bar</div> </body> </html>

foo.js

 // this js file will be completely ignored with window.onload //window.onload = function() { console.log("hello from external js"); var bar = document.getElementsByClassName("bar"); // this returns 0 instead of 1 console.log(bar.length); //};
  • When window.onload used in html, window.onload from external js will be ignored.
  • When window.onload from external js is commented out, bar.length returns 0.
  • When window.onload from html is removed, window.onload from external js works fine.

Can someone explain why I cannot use both window.onload ?

If I have to use window.onload in html, how to determine if a window is loaded from external js?

+4
source share
3 answers

1) As you become attached, you can use only one method for an event. You need to add an event listener for what you want.

 window.addEventListener("load", function() { alert("hello!");});

Setting the onload event method directly will replace any previously attached method. But if you use listeners instead, you can associate many of them with the event.

2) If you comment out the loading in an external file when document.getElementsByClassName("bar") is called, your document is not ready yet, then it will return 0 elements.

3) Use addEventListener, as I explained in the first paragraph. If you apply this in both places, it will work like a charm.

+7
source

onload is a window property. It acts like any other property of a variable. When you try to use it twice, you overwrite the original value with your second record.

Thus, your entire external script is ignored when it is ported to window.onload , because window.onload then overwritten as

 function() { console.log("hello from html"); };

If you want to perform 2 functions, define 2 functions, a and b ,

and set window.onload as follows:

 window.onload = function(){ a(); b(); }

Alternatively, you can link 2 separate events as Alcides suggests. My personal opinion is that its cleaner makes one binding to several functions, since it is easier to find out what is connected, to know in what order your functions will be executed, and to see everything that happens in one place, but basically this is a question style / preference if order doesn't matter.

0
source

Thats Correct, you are rewriting your own download, but you can always attach a new event listener to this window, like this

 function onLoadHandler(){ console.log("hello from external js"); var bar = document.getElementsByClassName("bar"); // page not loaded, so this returns 0 instead of 1 console.log(bar.length); } if (window.addEventListener) { window.addEventListener('load', onLoadHandler); } else if (window.attachEvent) { window.attachEvent('onload', onLoadHandler ); }
0
source

More articles:


All Articles