无需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脚本或任何东西。 就是这样:

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

cd /用户/ codemonkey / myCoolNewApp(例如在Mac上)

  1. 运行以下命令:

    python -m SimpleHTTPServer 80

在Mac或Linux上,您可能需要使用sudo:

sudo python -m SimpleHTTPServer 80

  1. 打开你的浏览器并input:

http://localhost/myapp.html (用您的脚本名称replace“myapp.html”)

  1. 人民欢欣鼓舞
  2. 要停止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来帮助您从本地系统访问数据文件。 这些是:-

  1. 退出closures任何正在运行的chrome实例。
  2. find您通常用来启动Chrome的快捷方式。
  3. 创build一个副本
  4. 右键单击新的快捷方式 ,然后select“ 属性”
  5. 在Tar​​get:文本框的最后,添加一个空格,然后添加所需的命令行标志。 它应该是这样的: “C:\ Program Files文件(x86)\谷歌\铬\应用程序\ chrome.exe” – 允许文件访问从文件 – 禁用networking安全
  6. 点击“应用”button,然后“确定”
  7. 双击新的快捷方式,使用新的命令行标志启动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