无需Web服务器，使用Javascript加载本地文件
我需要编写一个使用HTML5和canvas的软件。
整个软件应该能够在本地运行，而不需要服务器。 所以我只能使用JavaScript，没有PHP。
困难的部分：我必须dynamic获取操作过程中所需的文本文件的内容。
例如：当软件启动时，我需要“config.json”。 而用户做了一些desicions后，我需要“story1.txt”或“story2.txt”等。
我的问题：
我无法使用Ajax，因为Chrome阻止了它 – 本地文件不允许获取其他文件的内容。 我总是得到一个错误消息。
我到目前为止所尝试的是：
-
使用Ajax和jQuery加载文件
Chrome不允许我加载文件
-
将文件加载到script-Tag中
即使我将JSON文件声明为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."
题：
有没有办法dynamic加载文本文件，或者我不得不使用Web服务器？
如果你坚持使用Chrome浏览器，它有一些命令行标志允许访问本地源文件（ --allow-file-access-from-files / --disable-web-security ）。 请注意，你需要从头开始运行整个浏览器的标志 – 即如果已经有任何其他Chrome窗口打开标志将不会有任何效果，这种效果持续到所有的窗口，直到Chromeclosures，这显然是一个巨大的漏洞安全。
如果您使用某种自动设置脚本打包“应用程序”，则可以设置一个轻量级本地服务器。 这仍然不是很好，因为您需要安装用户可能不需要的可执行文件，或者由于限制而无法完全安装。
您可以将基于HTML / JS的应用程序打包为Chrome扩展程序 – 扩展程序的权限比随机代码宽许多，但是您需要通过Google Play分发，或者提供手动为用户安装扩展程序的说明。
最后，你可以格式化所有的数据，包括你提到的configuration和文本文件作为有效的JavaScript代码 – story1.txt story1.js包装为story1.txt ，如：
var myapp.story1 = "Complete text of story1.txt"
然后只需从相应的variables中dynamicselect所需的东西，甚至使用DOM操作来仅通过dynamic添加<script>标签来加载所需的<script> 。 在我看来，这将是最好的select，因为它不那么具有侵入性：它不需要任何安装/重新configuration，它只是开箱即用。
你必须把你的本地文件放在同一台服务器上。 如果你在本地服务器上运行，你必须安装一些web服务器作为Apache来访问你的“远程”位置。
每个现代浏览器停止这个，因为你不能从任何用户读本地文件。 即使你从本地主机运行。
我发现Firefox会在本地运行html和js。
如果您只需要一个简单快捷的“合法”Web服务器来让您的浏览器认为它不是从本地文件系统中提取，那么只需使用Python简单的HTPP服务器即可。 它只是根据请求从任何目录调用文件提供文件。 服务器是愚蠢的。 它不会执行PHP脚本或任何东西。 就是这样：
- 在开发机器上安装Python 2.7。 这是此修复程序将永久安装的唯一的东西。
- 打开你的命令行/terminal窗口。
- 切换到脚本所在的目录。
cd /用户/ codemonkey / myCoolNewApp（例如在Mac上）
- 运行以下命令：
python -m SimpleHTTPServer 80
在Mac或Linux上，您可能需要使用sudo：
sudo python -m SimpleHTTPServer 80
- 打开你的浏览器并input：
http：//localhost/myapp.html （用您的脚本名称replace“myapp.html”）
- 人民欢欣鼓舞
- 要停止Web服务器，请返回到正在运行的terminal窗口，然后按Ctrl-C。 或closures电脑。 这个服务器将需要重新启动使用第4步每次你想运行它。
你可以变得很花哨，并在不同的端口上运行多个实例，但这超出了这个快速修复的范围。
你所描述的（以及所提出的解决scheme） 严重 破坏了浏览器的安全性 。
应该能够在本地运行，而不需要服务器
那么软件如何上机呢？ 除非您打算在后期发送DVD，否则软件部署可以使用基于清单的caching （支持所有现代浏览器，包括Chrome， MSIE和Firefox ）作为HTML5应用程序。 这不适合将数据存储为普通文件 – 但是您可以将数据保存在本地存储中。
您可以在本地加载本地文件而不使用AJAX 。 你可以像使用$ .getJSON（）一样使用jQuery函数在Chrome浏览器中加载文件。
但是，如果你使用这个jQueryfunction，那么chrome Web Security会阻止你的函数访问文件表单文件包 。 在Firefox浏览器中，它可以完美运行，但如果您的要求是Chrome浏览器，那么您必须使用命令行设置一些Chromium标志。
以下是您设置Chromium Flags的一些步骤，它使您可以使用一些额外的function来帮助您从本地系统访问数据文件。 这些是：-
- 退出或closures任何正在运行的chrome实例。
- find您通常用来启动Chrome的快捷方式。
- 创build一个副本 。
- 右键单击新的快捷方式 ，然后select“ 属性” 。
- 在Target：文本框的最后，添加一个空格，然后添加所需的命令行标志。 它应该是这样的： “C：\ Program Files文件（x86）\谷歌\铬\应用程序\ chrome.exe” – 允许文件访问从文件 – 禁用networking安全
- 点击“应用”button，然后“确定” 。
- 双击新的快捷方式，使用新的命令行标志启动chrome。
注意：请记住您的标志现在只设置为这个铬图标。 所以用这个铬图标启动你的应用程序。
根据您的要求，使用获取（ 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); });
如果您的要求允许，我会做一个Chrome扩展。 他们很容易制作，可以为你工作得很好。 http://developer.chrome.com/extensions/index.html
