我使用JSFiddle来编辑我的代码。但是，在某些代码中，当我运行JavaScript或jQuery时，除非我选择“No wrap - <head>”或“No wrap - <body>”，否则它不起作用。
在上面的小提琴中，你会注意到点击<button>元素不会alert()你除非你选择了扩展名“No wrap - <head>”或“No wrap - <body>”。
我是一个好奇的人，喜欢理解事情的运作方式。该选项究竟发生了什么变化，为什么要改变它？
onLoad和onDomready包装代码，以便在文档加载或DOM就绪事件触发时运行JavaScript。这就像你写下你的代码一样：
<script type="text/javascript">
//<![CDATA[
window.onload=function(){ /* your js here */ }
//]]>
</script>
如果您将脚本标记添加到文档的头部或正文标记（如您可能习惯的话），则无包装选项。
<html>
<head>
<title>Stuff</title>
<script>
/* your code */
</script>
</head>
负载：
onLoad窗口事件中运行。这在整个页面已加载（例如图像）时运行。onDomReady：
onDomReady窗口事件中运行。这在DOM加载时运行。没有包装 - 在<head>：
<head>部分中没有包装 - 在<body>：
<body>部分中我想指出，更多信息可以在jsFiddle's documentation找到。
onload意味着页面中的所有源都被加载（包括图像css和js），domReady只意味着完成了dom树。
加载事件是一般的“加载完成”信号。它受到许多元素的支持。例如，外部SCRIPT和IMG，IFRAME在下载其内容完成时触发它。
当页面准备好时，DOMContentLoaded事件在文档上触发。它等待完整的HTML和脚本，然后触发。除IE <9之外的所有浏览器都支持它。
有关onDomready的更多信息。
下面是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>