5

My question is similar but a bit different than the one asked here, window.onload vs <body onload=""/>

In that question, it was a comparison between using window.onload and the inline js .

My question is the difference between the following. Assume the body tag has an Id of "bodyTag".

document.getElementById("bodyTag").onload = function () {
    alert("hi");
}

vs

window.onload = function () {
    alert("hi");
}

Exactly, what are the differences between those two and when should I use one versus the other? This is only for pure JavaScript. Am I correct in assuming that the difference is that window.onload won't start until after the entire webpage is loaded, all styles have been loaded, and all Javascript code has been loaded? While with the first version (document.getElementById("bodyTag").onload=), that it waits for entire webpage to load (and CSS styles if it was declared as an external CSS file in head), but NOT for all the Javascript to load? Is that the difference?

Community
  • 1
  • 1
Joe
  • 153
  • 3
  • 10
  • 1
    The behavior may vary between different browsers. body.onload will fire when the DOM is ready, which isn't necessarily after everything else is loaded. See here for a good answer: http://stackoverflow.com/questions/588040/window-onload-vs-document-onload – J. Dow Apr 18 '16 at 18:04
  • Thank you! Didn't even know about the existence of Document.onload. So it seems window.onload is what I want mostly, right? As for when the "DOM is ready", that's a bit unclear to me still. That just means when the actual webpage is loaded, but not scripts, right? And to confirm, overall, best practice is to use window.onload when dealing with pure JavaScript? – Joe Apr 18 '16 at 21:18
  • I'm not really sure if the accepted answer in this other thread is completely right on document.onload. The onload method listens on the load event which should only trigger in case **every** resource beneath the node has been loaded In contrast, the DomContentLoaded event should already trigger, if the basic DOM is in place. https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (there is a small paragraph to distinguish between these two) – J. Dow Apr 19 '16 at 19:18
  • If you want to wait on **all** resources to be loaded, take window.onload. To trigger js as soon as possible use DomContentLoaded (or jquerys ready method) – J. Dow Apr 19 '16 at 19:24

2 Answers2

2

Window (object) is sometimes reffered as global space container it contains all other objects (default and your custom one), it contains everything like indexedDB,session storage, cookies, your variables, your functions and everything within the browser page entirely. Basically, as I wrote above window is an object, it stores everything either as a method or property. let me explain what is property and what is method,

(function my_obj(){
this.firstName="john";
var middleName = "XYZ"
this.lastName="doe";
this.fullName = function(){
return this.firstName+" "+this.middleName+" "+this.lastName
}
document.write(this.fullName())
})();

In this example I created Object using constructor function, in this example firstName, middleName and lastName are reffered as property, and fullName() is called methed, (You can say that method is another name for function within an object). so consider window like this

window{
preset_obj:{};
indexedDB:{......};
.
.
.
.
.
.
.
.
.
.
.
//your code loads in the end
var my_var= "JS rocks!"
var anti_me= "Are You out of your Mind?? JS??Huh!"
var dont_care= "I Love COBOL"

}

but body my friend is different case, (not to mention document and body are two different objects). If you give body an ID and use document.getElementByID('ID'). it will return object containing all Visible elements that are displayed in the page. but it will not contain all other window stuff like cookies, session storage. Same is the Case with document. Document selects entire HTML code that you write nothing more nothing less. in other word it is object that contains everything that is enclosed within <html></html>tags. hope this clears confusion

-----------------------UPDATE--------------------------------------------------- OK sorry didnt read your post correct. window.onload will load when entire page is finished processing along with headers (not to be confused with head tag or HTML5 headertag). document.onload will load just when frontend work (HTML, CSS and JS will finish loading) time difference isn't much unless you are sending 100KB+ code in headers, I'd say stick with window.onload unless your headers are large or you want to do something time specific to page display

James Dab
  • 66
  • 9
-1

window onload will be loaded when the window of the web page is loaded, where as body onload will be loaded only when the body of the web page is loaded.

To make it simple, First window will be loaded and then body of the web page will be loaded. so Window.load will be loaded first and then body onload will work.

Sabari Giri
  • 7
  • 3