JavaScript window.onload与body.onload的区别

5
我的问题与此处提出的问题类似,但有些不同,window.onload vs <body onload=""/> 在那个问题中,比较的是使用window.onload和内联js的区别。
我的问题是以下两者之间的区别。假设body标签有一个ID为“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 加载完成,这就是区别吗?


1
行为可能因浏览器而异。当DOM准备就绪时,body.onload将被触发,这并不一定意味着其他所有内容都已加载完毕。请参见此处的良好答案:https://dev59.com/FHRB5IYBdhLWcg3wj36c - J. Dow
谢谢!我甚至不知道Document.onload的存在。所以似乎window.onload是我想要的,对吗?至于何时“DOM准备就绪”,这还有点不清楚。那只是指实际网页加载完成,但脚本还没有加载,对吗?总体而言,最好的做法是在处理纯JavaScript时使用window.onload,这一点需要确认吗? - Joe
我不确定另一个线程中被接受的答案在document.onload方面是否完全正确。onload方法侦听加载事件,该事件仅应在节点下的每个资源都已加载的情况下触发。相比之下,如果基本DOM已经就位,则DomContentLoaded事件应该已经触发。 https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded(有一个小段落来区分这两个事件) - J. Dow
如果您想等待所有资源加载完成,请使用window.onload。要尽快触发js,请使用DomContentLoaded(或jquery的ready方法)。 - J. Dow
2个回答

2

Window(对象)有时被称为全局空间容器,它包含所有其他对象(默认和自定义对象),包括indexedDB、会话存储、cookie、变量、函数以及完整的浏览器页面中的所有内容。 基本上,如我上面所写,窗口是一个对象,它将所有内容存储为方法或属性。让我解释一下什么是属性和什么是方法,

(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())
})();

在这个例子中,我使用构造函数创建了对象。在这个例子中,firstNamemiddleNamelastName被称为属性,而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>标记中的所有内容的对象。希望这能解清混淆。

-----------------------更新--------------------------------------------------- 好的,对不起我没有正确地阅读你的文章。 当整个页面完成处理以及标题时(不要与标记或HTML5

标记混淆),window.onload将加载。 document.onload只有在前端工作(HTML、CSS和JS)完成加载时才会加载。时间差异不大,除非您在头文件中发送100KB+的代码,否则我建议坚持使用window.onload,除非您的头部很大或您想针对页面显示进行某些时间特定的事情。


-1

当网页窗口加载时,window onload 会被加载,而 body onload 只有在网页正文加载时才会被加载。

为了简单起见,先加载窗口,然后再加载网页正文。所以 Window.load 会首先被加载,然后才会执行 body onload。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接