Question

我正在开发一个仅在页面的<canvas>内使用<body>的简单页面。所有内容都将通过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>？

非常感谢任何有关正确做法的澄清或指示！

Answer 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>

Answer 2

加载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); });

Answer 3

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

在您的情况下，它应位于<canvas>元素之后的底部。

DOM＆amp; JavaScript - 何时是获取JavaScript文件的最佳时机？

3 个答案: