Question

我使用JSFiddle编辑我的代码。但是，在某些代码中，当我运行JavaScript或jQuery时，除非我选择＆＃34;没有换行 - <head>＆＃34;否则它不起作用。或＆＃34;没有换行 - <body>＆＃34;。

JSFIDDLE HERE

在上面的小提示中，您会注意到点击<button>元素不会alert()您，除非您选择了扩展程序＆＃34;没有换行 - <head> ＆＃34;或＆＃34;没有换行 - <body>＆＃34;。

我是一个喜欢理解事物运作方式的好奇人物。该选项到底有什么变化，为什么要改变它？

Answer 1

<强>的onLoad ：

这意味着包装代码，使其在onLoad窗口事件中运行。这在整个页面已加载（例如图像）时运行。

<强> onDomReady ：

这意味着要包装代码，使其在onDomReady窗口事件中运行。这在DOM加载时运行。

没有换行 - <head> ：

这会将您的JavaScript代码放在<head>部分

没有换行 - <body> ：

这会将您的JavaScript代码放在<body>部分

我想指出，可以在jsFiddle's documentation中找到更多信息。

Answer 2

onLoad和onDomready包装代码，以便在文档加载或DOM就绪事件触发时运行JavaScript。就像你写下这样的代码一样：

Stackoverflow参考

 <script type="text/javascript"> 
    //<![CDATA[ 
      window.onload=function(){ /* your js here */ } 
   //]]> 
</script>

如果您将脚本标记添加到文档的头部或正文标记（例如您可能习惯使用它），则无包装选项。

 <html> 
 <head> 
       <title>Stuff</title> 
 <script> 
   /* your code */ 
 </script> 
 </head>

Answer 3

onload意味着页面中的所有源都被加载（包括图像css和js），domReady只意味着完成了dom树。

Answer 4

加载事件是一般的“加载完成”信号。它受到许多元素的支持。例如，外部SCRIPT和IMG，IFRAME在下载其内容完成时触发它。

当页面准备就绪时，DOMContentLoaded事件会在文档上触发。它等待完整的HTML和脚本，然后触发。除了IE＆lt; 9之外的所有浏览器都支持它。

Answer 5

有关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>

onLoad，onDomready，No wrap-in和No wrap-in有什么区别？

JSFIDDLE HERE

5 个答案: