JavaScript window.onload 与 body.onload答案

【问题标题】：JavaScript window.onload versus body.onloadJavaScript window.onload 与 body.onload
【发布时间】：2016-04-18 17:52:41
【问题描述】：

我的问题与这里提出的问题类似，但有点不同，window.onload vs <body onload=""/>

在那个问题中，这是使用 window.onload 和内联 js 之间的比较。

我的问题是以下之间的区别。假设 body 标签的 Id 为“bodyTag”。

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

对

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

确切地说，这两者之间有什么区别，我什么时候应该使用其中一个而不是另一个？这仅适用于纯 JavaScript。我是否正确假设不同之处在于 window.onload 在加载整个网页、加载所有样式和加载所有 Javascript 代码之后才会启动？在第一个版本（document.getElementById("bodyTag").onload=) 中，它等待整个网页加载（如果它在 head 中声明为外部 CSS 文件，则等待 CSS 样式），但不适用于所有 Javascript装载？有这个区别吗？

【问题讨论】：

不同浏览器的行为可能会有所不同。 body.onload 将在 DOM 准备好时触发，这不一定是在其他所有内容加载之后。请参阅此处以获得好的答案：stackoverflow.com/questions/588040/…
谢谢！甚至不知道 Document.onload 的存在。所以看来 window.onload 是我最想要的，对吧？至于“DOM 何时准备就绪”，我还不清楚。这只是意味着加载实际网页时，而不是脚本，对吗？并且要确认，总体而言，最佳实践是在处理纯 JavaScript 时使用 window.onload？
我不确定在另一个线程中接受的答案是否在 document.onload 上完全正确。 onload 方法侦听 load 事件，该事件仅在节点下的每个资源已加载的情况下触发。相反，如果基本 DOM 已到位，则 DomContentLoaded 事件应该已经触发。 developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded（有一小段可以区分这两者）
如果你想等待所有资源被加载，使用window.onload。要尽快触发 js，请使用 DomContentLoaded（或 jquerys 就绪方法）

标签： javascript html css

【解决方案1】：

窗口（对象）有时被称为全局空间容器，它包含所有其他对象（默认对象和自定义对象），它包含索引数据库、会话存储、cookie、变量、函数以及浏览器页面中的所有内容. 基本上，正如我在上面写的，window 是一个对象，它将所有内容存储为方法或属性。让我解释一下什么是属性，什么是方法，

(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() 被称为方法，（你可以说方法是对象内的函数）。所以考虑这样的窗口

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"

}

但是 body 我的朋友是不同的情况，（更不用说 document 和 body 是两个不同的对象）。如果你给 body 一个 ID 并使用document.getElementByID('ID')。它将返回包含页面中显示的所有可见元素的对象。但它不会包含所有其他窗口内容，如 cookie、会话存储。与文件的情况相同。 Document 选择您编写的整个 HTML 代码。换句话说，它是包含<html></html>tags 中的所有内容的对象。希望这能消除混乱

-----------更新----------- ---------------------------- 好的，抱歉没有正确阅读您的帖子。 window.onload 将在整个页面与标题一起完成处理后加载（不要与 head 标签或 HTML5 headertag 混淆）。 document.onload 只会在前端工作（HTML、CSS 和 JS 将完成加载）时加载，除非您在标头中发送 100KB+ 代码，否则我会说坚持使用 window.onload 除非您的标头很大或者您想做一些特定于页面显示的时间

【讨论】：

【解决方案2】：

window onload 将在网页窗口加载时加载，而 body onload 仅在网页正文加载时加载。

为了简单起见，第一个窗口将被加载，然后网页的正文将被加载。所以 Window.load 将首先加载，然后 body onload 将起作用。

【讨论】：