DOM & JavaScript - 何时是获取 JavaScript 文件的合适时间？答案

【问题标题】：DOM & JavaScript - When is the right time to source a JavaScript file?DOM & JavaScript - 何时是获取 JavaScript 文件的合适时间？
【发布时间】：2014-01-24 16:40:32
【问题描述】：

我正在处理一个仅在页面的<body> 中使用<canvas> 的简单页面。所有内容都将通过javascript加载。我在我的 javascript 中使用该文档时遇到了问题，我想知道是否有人可以指出我使用 <script> 标签的正确方向。这是我的主要问题：

对于使用 window.onload 加载的函数，<script> 的适当位置是什么

这是我正在使用的代码：

index.html
----
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="window.js" type="text/javascript"></script>
    </head>
    <body>
        <canvas>Canvas is not supported by your browser!</canvas>
    </body>

window.js
----
Window = function(doc, win)
{
    this.doc = doc;
    this.win = win;

    this.initialize();
}

Window.prototype = 
{
    initialize: function()
    {
        this.doc.documentElement.style.overflow = 'hidden';
        this.doc.body.scroll = "no";

        this.resize();
        this.win.addEventListener('resize', this.resize.bind(this));
    },
    resize: function()
    {
        _canvas = this.doc.querySelector('canvas');
        _canvas.width = this.win.innerWidth;
        _canvas.height = this.win.innerHeight;

    }
};

window.onload = new Window(document, window);

在我运行过的这个脚本的所有测试中，它工作的唯一实例是<script> 放在初始<body> 标记之后。当我将<script> 放在<head> 中时，它给了我一个错误提示：

Uncaught TypeError: Cannot set property 'value' of null

为了一个看起来干净的文档，<script> 不可能出现在<head> 中吗？

任何关于正确做法的澄清或指导将不胜感激！

【问题讨论】：

脚本应始终加载到中。您遇到的情况可能是由于您的脚本在整个页面呈现之前运行。
@Diodeus 这是不对的！主要是不管脚本包含在哪里。最快的执行是在body 标记的末尾。
阅读此答案以获取有关脚本放置的更多信息：stackoverflow.com/a/4396937/1310604
类似问题：stackoverflow.com/questions/196702/…

标签： javascript html dom

【解决方案1】：

脚本标签通常应位于页面底部。这可确保所有内容都已加载并准备好进行交互...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <canvas>Canvas is not supported by your browser!</canvas>

        <script src="window.js" type="text/javascript"></script>
    </body>
</html>

【讨论】：

是否有任何文档可以将其作为 DOM 的标准部分进行备份？
这是支持我的相关文章...stackoverflow.com/questions/436411/…
问题是，正如我在回答中指出的那样，无法保证在 JS 触发时元素已加载。您必须在它加载到 DOM 后引用它，虽然页面底部很可能只是这样一个位置，但有时它不是。
这就是为什么我在回答中提到“脚本标签应该放在页面底部-->通常
您的帖子说This ensures all content has loaded and is ready for interaction，这是不正确的。说大部分而不是全部会更准确。

【解决方案2】：

如果您不将脚本放在元素之后，就您的脚本而言，该元素不存在。它需要在底部，或者至少在画布元素之后。

在你的情况下，它应该在底部，在 <canvas> 元素之后。

【讨论】：

【解决方案3】：

你的 JS 文件在哪里加载并不重要。您的问题是 JS 文件可能会在您的 DOM 完全绘制之前加载。在浏览器完成加载中间之前，我有页面底部的 JS 正在执行的页面。这就是为什么每个 JS 框架都包含一些东西来检查 DOM 是否准备好。在 jQuery 中，您将使用 ready

$(document).ready(function() { alert('My DOM is loaded!'); });

在 jQuery 之外，您可以使用 DOMContentLoaded。把它放在你的window.js 文件的底部，你可以毫无问题地将它加载到你的标题中。

document.addEventListener("DOMContentLoaded", function(event) {
    new Window(document, window);
});

【讨论】：

较短但等效的语法：$(function() { alert('My DOM is loaded!'); });
...甚至window.onload = function(){new Window(document, window);}