外部JS文件导致我的网页显示为空白

External JS file causing my webpage to appear blank

本文关键字：网页 显示 空白 我的 JS 文件 外部      更新时间：2023-09-26

我正在制作一款名为Diplomacy的旧战略游戏的基于浏览器的克隆。这就是我目前所掌握的：

<html>
<head>
<title>Diplomacy</title>
<script type="text/javascript" src="game.js" />
</head>

<body>
<canvas id="canvas" width="750" height="750" style="border: 3px solid black; background:url('DiplomacyMap.png');">
Your browser does not support Canvas.
</canvas>
</body>
</html>

它在浏览器中是什么样子的？空白页。然而，如果我删除了头中外部JS文件（game.JS）的链接，它就没有问题了。这似乎与JS文件的内容无关，因为即使我删除了它们或将它们全部注释掉，问题仍然存在。这似乎仅仅与元素的存在有关。

如果将<script src="file.js">元素替换为嵌入的<script> ...code... </script>，则页面工作正常。

所以。。。发生了什么事？

第2部分：

<script type="text/javascript">
colorProvince(PARIS, FRANCE);
</script>

虽然colorProvince函数以及PARIS和FRANCE常量都是在game.js中定义的，但没有调用此函数（通过colorProvince功能中的简单alert（）进行验证）。这也没有任何作用：

<script type="text/javascript">
alert(colorProvince);
</script>

<script type="text/javascript" src="game.js" />

需要

<script type="text/javascript" src="game.js"></script>

在game.js中，colorProvince()中有一个额外的分号。将其替换为：

function colorProvince(province, nation){
    alert(5);
    for (var i = 0; i < province.getRectangles().length; i++)
    {
        //colorRect(rect, "red");
    }
}

<script>标签不能自关闭。它们必须有一个结束标记，否则大多数浏览器都会阻塞。

使用<script></script> 而不是<script />

相关文章：