Question

我试图在另一个HTML文件中的一个JavaScript文件中实例化一个类，但我一直在收到此错误。

以下是JavaScript文件的代码：

class Puzzle {
  constructor(fenStart, pgnEnd) {
    this.fenStart = fenStart;
    this.pgnEnd = pgnEnd;
  }
}

这是HTML的代码。应该注意的是，我也在使用chessboard.js和chess.js，并且所有内容都保存在同一个文件夹中。

<!DOCTYPE html>
<html>
  <head>
    <title>Chess</title>
    <base href="http://chessboardjs.com/" />
  <link rel="stylesheet" href="css/chessboard.css" />
  </head>
  <body>
  <script src="js/chess.js"></script>
  <div id="board" style="width: 400px"></div>
  <p>PGN: <span id="pgn"></span></p>
  <script src="js/json3.min.js"></script>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/chessboard.js"></script>
  <script src="class.js"></script>

    <script>
      var pgnEl = $('#pgn');

      const x = new Puzzle("test", "test");

      pgnEl.html(x.fenStart);
    </script>
  </body>
</html>

导致此错误的原因是什么？如何解决？

Answer 1

这可能是由于文件位置不正确造成的，例如@sideroxylon说，js/class.js而不是class.js。

＆＃34; HTML <base>标记用于为相对链接指定基本URI或URL。＆＃34; https://www.tutorialspoint.com/html/html_base_tag.htm这可能是您的文件无法访问的另一个原因。

也可能是某些网址遭到阻止。尝试打开开发者控制台（CTRL-SHIFT-I或F12）并查找页面上的任何错误。

如果您通过HTTPS加载，则可能会阻止来自HTTP源的任何内容。这是您的确切代码（使用每个库的在线版本），但将class.js文件作为常规脚本标记加载并包含起始<body>标记。 https://jsfiddle.net/ckazwozg/正如您应该看到的那样，它运作良好。

编辑：为方便起见，这是来自JSFiddle的原始源代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Chess</title>
  <link rel="stylesheet" href="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.css" />
  </head>
  <body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
  <div id="board" style="width: 400px"></div>
  <p>PGN: <span id="pgn"></span></p>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.js"></script>
  <script>
  // class.js
  class Puzzle {
    constructor(fenStart, pgnEnd) {
        this.fenStart = fenStart;
        this.pgnEnd = pgnEnd;
    }
    }
  </script>

    <script>
      var pgnEl = $('#pgn');

      const x = new Puzzle("test", "test");

      pgnEl.html(x.fenStart);
    </script>
  </body>
</html>

Answer 2

我遇到了同样的错误，但是我所做的是确保所有文件都保存到您的情况下的根文件夹中，我认为这是js（因为所有扩展名都指向该位置），我只使用了为其提供javascript扩展名（.js）后的文件名。

服务器响应状态为404（未找到）

2 个答案: