javascript onLoad、onDomready、No wrap - in <head> 和 No wrap - in <body> 之间有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26985800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?
提问by Drazzah
I use JSFiddle for editing my code. However, in certain codes when I'm running JavaScript or jQuery, it doesn't work unless I select "No wrap - <head>" or "No wrap - <body>".
我使用 JSFiddle 来编辑我的代码。但是，在某些代码中，当我运行 JavaScript 或 jQuery 时，除非我选择“不换行 - <head>”或“不换行 - <body>”，否则它不起作用。
JSFIDDLE HERE
JSFIDDLE 在这里
In the fiddle above, you will notice that clicking the <button>element will not alert()you unless you've selected either the extension "No wrap - <head>" or "No wrap - <body>".
在上面的小提琴中，您会注意到，除非您选择了扩展名“No wrap - ”或“No wrap - ”，否则点击<button>元素将不会出现。alert()<head><body>
I'm a curious person who likes to understand how things work. What exactly does that option change, and why would you change it?
我是一个好奇的人，喜欢了解事物是如何运作的。该选项究竟改变了什么，你为什么要改变它？
采纳答案by Parth Akbari
The onLoad and onDomready wrap the code so that the JavaScript runs when the document load or DOM ready events fire. It's as if your wrote your code like this:
onLoad 和 onDomready 包装代码，以便在文档加载或 DOM 就绪事件触发时运行 JavaScript。就好像你这样写你的代码：
<script type="text/javascript">
//<![CDATA[
window.onload=function(){ /* your js here */ }
//]]>
</script>
The no wrap options are if you added your script tag to the head or the body tags of the document like how you're probably used to doing it.
无换行选项是如果您将脚本标记添加到文档的头部或正文标记中，就像您可能习惯的那样。
<html>
<head>
<title>Stuff</title>
<script>
/* your code */
</script>
</head>
回答by Spencer Wieczorek
onLoad:
加载：
- This means wrap the code so it will run in
onLoadwindow event. This runs when the entire page has loaded (such as images).
- 这意味着包装代码，使其在
onLoad窗口事件中运行。这会在整个页面加载完毕（例如图像）时运行。
onDomReady:
onDomReady:
- This means to wrap the code so it will run in
onDomReadywindow event. This runs when the DOM has loaded.
- 这意味着包装代码以便它在
onDomReady窗口事件中运行。这在 DOM 加载时运行。
no wrap - in <head>:
没有换行<head>：
- This will place your JavaScript code in the
<head>section
- 这会将您的 JavaScript 代码放在该
<head>部分
no wrap - in <body>:
没有换行<body>：
- This will place your JavaScript code in the
<body>section
- 这会将您的 JavaScript 代码放在该
<body>部分
I would like to note that more information can be found in jsFiddle's documentation.
我想指出，可以在jsFiddle 的文档中找到更多信息。
回答by user2822889
onload means all sources in the page are loaded ( include image css and js), domReady just means the dom tree is done.
onload 意味着页面中的所有源都已加载（包括图像 css 和 js），domReady 仅意味着 dom 树已完成。
回答by jamesxiang
The load event is a general “loading complete” signal. It is supported by many elements. For example, external SCRIPTand IMG, IFRAME trigger it when downloading of their content finishes.
加载事件是一个通用的“加载完成”信号。它得到了许多元素的支持。例如，外部 SCRIPT 和 IMG、IFRAME 在其内容下载完成时触发它。
The DOMContentLoaded event triggers on document when the page is ready. It waits for the full HTML and scripts, and then triggers.All browsers except IE<9 support it.
当页面准备好时，DOMContentLoaded 事件在文档上触发。它等待完整的 HTML 和脚本，然后触发。除 IE<9 外的所有浏览器都支持它。
回答by themefield
More information about onDomready.
有关的更多信息onDomready。
Below is how JSFiddle actually wraps our codes to run. They support the browsers which do not have addEventListenermethod to listen to DOMContentLoadedevent.
下面是 JSFiddle 实际上如何包装我们的代码以运行。它们支持没有addEventListener方法监听DOMContentLoaded事件的浏览器。
<script type="text/javascript">
//<![CDATA[
var VanillaRunOnDomReady = function() {
// Your own JS codes are placed here.
}
var alreadyrunflag = 0;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag = document.getElementById("contentloadtag")
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
//]]>
</script>
