Question

我有一个简单的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的适当位置在哪里？

Answer 1

main.js正在background / event page上运行，并且与新创建的窗口的DOM不在同一个上下文中。您可以按照create callback中的说明与该上下文进行交互，但不是我建议如何解决此问题。

相反，您可以从main.js创建窗口，并从HTML文件加载直接执行的脚本代码。

<强> window.html：

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

<强> window.js：

var canvas = document.getElementById("canvas"),
game = new Game(canvas, new Snake(canvas), new Food(canvas));
game.init();
game.run();

DOM未在Chrome应用中加载

1 个答案: