javascript - 在没有 Web 服务器的情况下使用 Javascript 加载本地文件

Question

我需要编写一个使用 HTML5 和 Canvas 的软件。

整个软件应该能够在本地运行，而不需要服务器。所以我只能使用 Javascript，不能使用 php。

困难的部分:我必须动态获取操作期间需要的文本文件的内容。

例如:当软件启动时，我需要“config.json”。 在用户做出一些决定后，我需要“story1.txt”或“story2.txt”等。

我的问题:

我不能使用 Ajax，因为 Chrome 会阻止它 - 不允许本地文件获取其他文件的内容。我总是收到错误消息。

到目前为止我尝试了什么:

• 使用 Ajax 和 jQuery 加载文件

  Chrome 不允许我加载文件

• 将文件载入脚本标签

  即使我将 JSON-File 声明为 js-Code，我也无法访问加载文件的内容

• 将文件加载到不可见的 Iframe 中，并读取其内容

  加载成功，我可以看到代码。但是当我尝试访问 IFrame 的内容时，我再次收到 Chrome 错误消息:

  "Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match."
  

问题:

有没有办法动态加载文本文件，或者我是否被迫使用网络服务器？

Answer 1

如果您坚持使用 Chrome，它有一些命令行标志允许访问/来自本地原始文件 ( --allow-file-access-from-files/--disable-web-security )。请注意，您需要使用这些标志从头开始运行整个浏览器 - 即，如果已经有任何其他 Chrome 窗口打开标志将不会有任何效果，并且该效果会在所有窗口中持续存在，直到 Chrome 关闭，这显然是一个巨大的漏洞安全。

如果您使用某种自动设置脚本打包您的“应用程序”，您可以设置一个轻量级本地服务器。这仍然不是很好，因为您需要安装用户可能不想要甚至由于限制而完全无法安装的可执行文件。

您可以将基于 HTML/JS 的应用程序打包为 Chrome 扩展程序 - 扩展程序具有比随机代码更广泛的权限，但您需要通过 Google Play 分发它或提供说明以手动为您的用户安装扩展程序。

最后，您可以格式化所有数据，包括您提到的作为有效 JavaScript 代码的配置和文本文件 - 即打包 story1.txt至 story1.js喜欢:

var myapp.story1 = "Complete text of story1.txt"

然后只需从相应的变量中动态选择您需要的内容，甚至使用 DOM 操作通过动态添加 <script> 仅加载您需要的脚本标签。在我看来，这将是最佳选择，因为它的侵入性较小:它不需要任何安装/重新配置，开箱即用。