JavaScript window.onload与body.onload [英] JavaScript window.onload versus body.onload
问题描述
我的问题与此处的问题相似，但有些不同，窗口.onload与< body onload ="/">
My question is similar but a bit different than the one asked here, window.onload vs <body onload=""/>
在该问题中，它是使用window.onload和内联js的比较.
In that question, it was a comparison between using window.onload and the inline js .
我的问题是以下两者之间的区别.假设body标签的ID为"bodyTag".
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");
}
准确地说，这两者之间有什么区别?我何时应该使用一个与另一个?这仅适用于纯JavaScript.我是否可以假设window.onload直到加载整个网页，加载所有样式以及加载所有Javascript代码之后才能启动，是否正确?在使用第一个版本(document.getElementById("bodyTag").onload =)时，它会等待整个网页加载(如果在头部声明为外部CSS文件，则将等待加载CSS样式)，而不是对所有Javascript加载装载?有区别吗?
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?
推荐答案
窗口(对象)有时被称为全局空间容器，其中包含所有其他对象(默认对象和您的自定义对象)，包含诸如indexedDB，会话存储，Cookie，变量，函数以及浏览器页面中的所有内容.基本上，正如我在上面的窗口中所写，window是一个对象，它将所有内容存储为方法或属性.让我解释一下什么是属性，什么是方法，
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())
})();
在此示例中，我使用构造函数创建了Object，在此示例中， firstName ， middleName 和 lastName 被引用为属性，而> 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"
}
但是我的朋友身体是不同的情况，(更不用说文档和身体是两个不同的对象).如果您给正文提供一个ID并使用 document.getElementByID('ID').它将返回包含页面中显示的所有Visible元素的对象.但它不会包含所有其他窗口内容，例如cookie，会话存储.文档也是如此.文档会选择整个HTML代码，而您编写的内容只会更多.换句话说，它是包含< html></html> 标记中包含的所有内容的对象.希望这能消除混乱
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 ---------------------------------------------------好的，抱歉，您的帖子未正确阅读. window.onload 将在整个页面与标头(不要与 head 标记或HTML5 header 标记混淆)一起完成处理时加载. document.onload 将仅在前端工作(HTML，CSS和JS将完成加载)时加载，除非您在标头中发送100KB +的代码，否则时差不会太大，我会坚持使用window.onload除非标题很大，或者您想针对页面显示做一些特定的时间
-----------------------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
这篇关于JavaScript window.onload与body.onload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
