29

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

整个软件应该能够在本地运行，而不需要服务器。所以我只能使用 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."

问题：

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

4

8 回答 8

12

如果您坚持使用 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>标签来只加载你需要的脚本。在我看来，这将是最好的选择，因为它的侵入性较小：它不需要任何安装/重新配置，它只是开箱即用。

于 2013-11-11T09:31:03.073 回答
6

如果您只需要一个快速简单的“合法”网络服务器来欺骗您的浏览器，使其认为它不是从本地文件系统中提取的，那么只需使用 Python 的简单 HTPP 服务器。它只是根据调用它的任何目录的请求提供文件。服务器在其他方面很愚蠢。它不会执行 PHP 脚本或任何东西。就是这样：

  1. 在您的开发机器上安装 Python 2.7。这是此修复程序将永久安装的唯一内容。
  2. 打开你的命令行/终端窗口。
  3. 切换到脚本所在的目录。

cd /Users/codemonkey/myCoolNewApp（例如在 Mac 上）

  1. 运行以下命令：

    python -m SimpleHTTPServer 80

在 Mac 或 Linux 机器上，您可能需要使用 sudo：

sudo python -m SimpleHTTPServer 80

  1. 打开浏览器并输入：

http://localhost/myapp.html（用您的脚本名称替换“myapp.html”）

  1. 人们欢欣鼓舞。
  2. 要停止 Web 服务器，请返回运行它的终端窗口并按 Ctrl-C。或者关闭计算机。每次要运行此服务器时，都需要使用步骤 4 重新启动它。

您可以非常花哨并在不同的端口上运行多个实例，但这超出了此快速修复的范围。

于 2017-04-16T20:24:09.593 回答
4

您必须将本地文件放在同一台服务器上。如果您在本地服务器上运行，则必须安装一些网络服务器作为 Apache 才能访问您的“远程”位置。

每个现代浏览器都会阻止这一点，因为您不能从任何用户那里读取本地文件。即使您是从 localhost 运行的。

于 2013-11-11T09:16:44.667 回答
4

我发现firefox会在本地运行html和js。

于 2015-05-04T17:09:32.497 回答
2

您所描述的（以及建议的解决方案）严重 破坏了浏览器的安全性。

应该可以在本地运行，不需要服务器

那么软件是如何进入机器的呢？除非您打算在帖子中发送 DVD，否则软件的部署可以作为 HTML5 应用程序使用基于清单的缓存（所有现代浏览器都支持，包括 Chrome、MSIE和Firefox）。这不适合将数据存储为普通文件 - 但您可以将数据保存在本地存储中。

于 2014-11-08T00:51:56.853 回答
2

您可以在不使用AJAX的情况下本地加载 Chrome 浏览器中的本地文件。您可以正常使用$.getJSON()之类的jQuery函数在 chrome 浏览器中加载文件。

但是如果您使用这个 jQuery 功能，那么chrome Web Security将阻止您访问文件表单文件包的功能。在 Firefox 浏览器上它可以完美运行，但如果您的要求是 chrome 浏览器，那么您必须使用命令行设置一些 Chromium 标志。

以下是设置 Chromium Flags 的一些步骤，它使您能够获得一些额外的功能，帮助您从本地系统访问数据文件。这些是：-

  1. 退出或关闭chrome 的任何运行实例。
  2. 找到您通常用来启动chrome的快捷方式。
  3. 创建它的副本。
  4. 右键单击新的快捷方式，然后选择属性。
  5. 在 Target: 文本框的最后，添加一个空格，然后添加所需的命令行标志。它应该类似于： “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”--allow-file-access-from-files --disable-web-security
  6. 单击“应用”按钮，然后单击“确定”。
  7. 双击新的快捷方式以使用新的命令行标志启动 chrome。

注意：请记住您的标志现在仅为此 chrome 图标设置。所以用这个 chrome 图标启动你的应用程序。

于 2015-08-26T08:32:08.913 回答
1

如果您的要求允许，我会制作一个 Chrome 扩展程序。它们很容易制作，并且可以很好地为您服务。http://developer.chrome.com/extensions/index.html

于 2013-11-11T09:13:14.137 回答
1

根据您的要求，可以选择使用 fetch ( https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API )：

  fetch("./config.json").then(function(res) {
    // res instanceof Response == true.
    if (res.ok) {
      res.json().then(function(data) {            
        console.log(data);
      });
    } else {
      console.log("Looks like the response wasn't perfect, got status", res.status);
    }
  }, function(e) {
    console.log("Fetch failed!", e);
  });
于 2017-07-05T18:50:16.087 回答