0

我有一个简单的 HTML5 Snake 游戏，它使用我想打包为 Chrome 应用程序的画布。这是我的普通 HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Snake</title>
        <link rel="stylesheet" href="snake.css">
    </head>
    <body>
        <canvas id="canvas" width="700" height="700"></canvas>
        <script type="text/javascript" src="food.js"></script>
        <script type="text/javascript" src="snake.js"></script>
        <script type="text/javascript" src="point.js"></script>
        <script type="text/javascript" src="game.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                    var canvas = document.getElementById("canvas"),
                    game = new Game(canvas, new Snake(canvas), new Food(canvas));
                game.init();
                game.run();
            }
        </script>
    </body>
</html>

但是不允许使用 HTML 中的脚本。所以我删除了它并将它放置在创建窗口的 main.js 中。我提供了一个与上面相同的回调，window.onload因为我的理解是这是 chrome 应用程序等价物：

chrome.app.runtime.onLaunched.addListener(function() {
    "use strict";
    chrome.app.window.create('snake.html', {
        bounds: {
            width: 800,
            height: 800
        }
    }, function() {
        var canvas = document.getElementById("canvas"),
            game = new Game(canvas, new Snake(canvas), new Food(canvas));
        game.init();
        game.run();
    });
});

这在 DOM 似乎已加载但document.getElementById始终返回 null 之后运行。查看开发人员工具中的文档，即使我可以在应用程序窗口中看到画布（我在画布周围有一个边框），它看起来也只加载了脚本。谁能告诉我发生了什么？window.onload何时不工作时访问 DOM 的合适位置在哪里？

4

1 回答 1

1

main.js 在后台/事件页面上运行，并且与新创建的窗口的 DOM 不在同一个上下文中。您可以按照create callback中的说明与该上下文进行交互，但这不是我推荐的解决方法。

相反，只需从您的 main.js 创建窗口，然后从 HTML 文件加载直接执行的脚本代码。

窗口.html：

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="700" height="700"></canvas>
        <script ...</script>
        <script type="text/javascript" src="window.js"></script>

窗口.js：

var canvas = document.getElementById("canvas"),
game = new Game(canvas, new Snake(canvas), new Food(canvas));
game.init();
game.run();
于 2013-09-19T03:56:30.070 回答