Answers:
window.onload = myOnloadFunc
并且<body onload="myOnloadFunc();">
是使用同一事件的不同方法。使用起来window.onload
不太麻烦-它使您的JavaScript脱离了HTML。
所有常见的JavaScript库,Prototype,ExtJS,Dojo,JQuery,YUI等,都为装入文档时发生的事件提供了很好的包装器。您可以侦听窗口的onLoad事件,并对此作出反应,但是在下载完所有资源之前不会触发onLoad,因此,只有在获取到最后一个大图像之后,事件处理程序才会执行。在某些情况下,这正是您想要的,在其他情况下,您可能会发现侦听DOM准备就绪的情况更为合适-此事件类似于onLoad,但会在不等待图像等下载的情况下触发。
myOnloadFunc()
在全局上下文中调用(this
将参考window
)。通过javascript对其进行设置将使其在元素的上下文中执行(this
指的是触发事件的元素)。在这种特殊情况下,它不会有任何变化,但与其他元素会有所不同。
this
如果需要,使用JS库可以覆盖引用的对象。
没什么区别,但是您都不应该使用两者。
在许多浏览器中,window.onload
直到所有图像都加载后才触发该事件,这不是您想要的。基于标准的浏览器有一个名为的事件DOMContentLoaded
,该事件会较早触发,但IE不支持(在编写此答案时)。我建议使用支持跨浏览器DOMContentLoaded功能的javascript库,或者找到可以使用的编写良好的函数。jQuery的$(document).ready()
一个很好的例子。
window.onload
不用身体就能工作。仅使用脚本标签创建页面,然后在浏览器中将其打开。该页面不包含任何正文,但仍然可以使用。
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script>
<!ELEMENT html (head, body)>
[1] -和HTML401指定<!ELEMENT HTML O O (%html.content;)
用<!ENTITY % html.content "HEAD, BODY">
以及[2]。html51也指出A head element followed by a body element.
html内容。[3] w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/html51/semantics.html#the -html-element- 所以我想所有这些常用/正在使用的HTML标准都需要一个body标签。:)
Start tag: optional, End tag: optional
通常,我更喜欢不使用<body onload=""
>事件。我认为将行为与内容尽可能分开是比较干净的。
就是说,在某些情况下(通常对我来说很少见),使用身体负荷可以稍微提高速度。
我喜欢使用Prototype,因此通常将类似的内容放在<head
页面的>中:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});
要么
Event.observe(window, 'load', function(){
alert('Window onload');
});
以上是我在这里学到的技巧。我非常喜欢HTML之外的附加事件处理程序的概念。
(编辑以更正代码中的拼写错误。)
对一个客观问题有这么多主观的答案。“不引人注目的” JavaScript就像永远不使用gotos的旧规则一样是迷信。编写代码的方式可以帮助您可靠地实现目标,而不必遵循某人的新潮宗教信仰。
任何发现以下内容的人:
<body onload="body_onload();">
过度分心过于自命不凡,没有优先考虑的事情。
我通常将我的JavaScript代码放在一个单独的.js文件中,但是我发现在HTML中挂接事件处理程序没有任何麻烦,顺便说一下,这是有效的HTML。
window.onload
-在所有DOM,JS文件,图片,iframe,扩展名和其他文件完全加载后调用。等于$(window).load(function(){});
body onload=""
-DOM加载后调用。等于$(document).ready(function(){});
ready
vs onload
事件的最大误解。load
加载整个文档(包括所有脚本,图像和样式表)后触发。DOMContentLoaded
DOM树已建成之后,但图像等,其之前的火灾DOMContentLoaded
具有等效性document.ready
,不load
。
将onload视为其他任何属性。例如,在输入框上,您可以输入:
<input id="test1" value="something"/>
或者您可以致电:
document.getElementById('test1').value = "somethingelse";
onload属性的工作方式相同,除了它使用函数作为其值而不是像value属性那样使用字符串。这也解释了为什么您可以“仅使用其中之一”的原因-调用window.onload为body标签重新分配onload属性的值。
而且,就像这里的其他人所说的那样,通常将样式和javascript与页面内容分开是比较干净的,这就是为什么大多数人建议使用window.onload或喜欢jQuery的ready函数的原因。
<body onload =“”>应该覆盖window.onload。
使用<body onload =“”>,document.body.onload可能为null,未定义或取决于浏览器的函数(尽管getAttribute(“ onload”)对于在字符串中获取匿名函数的主体应保持一致) 。使用window.onload,当您为其分配功能时,window.onload将是跨浏览器一致的功能。如果这对您很重要,请使用window.onload。
无论如何,window.onload更好地将JS与您的内容分离。当您可以使用window.onload时,没有太多理由使用<body onload =“”>。
在Opera中,window.onload和<body onload =“”>(甚至window.addEventListener(“ load”,func,false))的事件目标将是窗口,而不是Safari和Firefox中的文档。但是,“这”将是跨浏览器的窗口。
这就是说,重要的是,您应该包装杂物并使其保持一致,或使用为您提供帮助的库。
抱歉,在再次睡眠3年后再次实现该线程的轮回,但是也许我终于找到了window.onload=fn1;
over 的无可争议的好处<body onload="fn1()">
。它涉及到JS模块或ES模块:当您的onload
处理程序位于“经典” JS文件中(即,不带时<script type="module" … >
,可以以任何一种方式引用;当您的onload
处理程序位于“模块” JS文件中(即<script type="module" … >
,以引用时,<body onload="fn1()">
则以“ fn1”表示失败) ()未定义”错误。原因可能是在解析HTML之前未加载ES模块……但这只是我的猜测。无论如何,它window.onload=fn1;
与模块完美配合...