logo标签列表

JavaScript内联/块在文档准备就绪之前执行吗？

javascriptjqueryhtmldocument-ready
9

假设一个HTML文档中有内联JavaScript代码（例如在body标签中），这段JavaScript代码总是在JQuery document-ready代码之前执行吗？

例如，以下代码是否安全？

...
<body>
    <script type="text/javascript">
        var myVar = 2;
   </script>
   ...
</body>

...
$(document).ready(function() {
    alert('My Var = ' + myVar);
}

如果没有，我该如何确保安全，知道myVar在内联/块代码中定义？
3个回答
12

是的，上面的代码是安全的。内联JS在文档自上而下解析时被执行。当文档准备就绪（显然），文档准备处理程序会被执行，而且在整个文档 包括 内联脚本被解析之前它不会准备就绪。

请注意，如果您将其包含为文档主体中的最后一件事情，则不需要文档准备处理程序，因为此时不仅将执行其他内联JS，而且所有文档元素都将添加到DOM中，因此可以从JS访问。

7

是的，内联 JavaScript 在解析 HTML 时被执行。

只要不尝试获取尚未解析的 DOM 元素的引用（即 HTML 源代码中脚本块之后的任何元素），这样做是安全的。您还可以引用在先前脚本块中定义的任何变量（只要它们在作用域内）。

并且，正如 Matt Browne 在他的评论中指出的那样，如果您将依赖于 DOM 被加载的脚本放置在关闭的 </body> 标记之前，通常也不使用 DOMContentLoaded 监听器（或旧版 IE 解决方法或 window.onload）。此时，所有 HTML 元素都已经在 DOM 中了（除非您在 </body> 之后还有其他元素，这将是无效的 HTML）。

3
相关提示：如果您将依赖于jQuery的脚本放在结束标签</body>之前，通常不使用$(document).ready()也是安全的。 - Matt Browne
3
关于这个说明：依赖于jQuery的脚本可以在jquery.js被引入之后的任何位置。但是我们知道@MattBrowne的意思是：依赖于DOM准备就绪的脚本可以放置在页面主体的末尾，而不是在ready事件处理程序中。 - nnnnnn
1
可以安全地假设myVar可以在$(document).ready(function() {})内部访问。
如果在HTML中运行代码，myVar将成为window JS全局对象的属性（即window.myVar）。我认为在jQuery函数中创建它并不必要。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接