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

IT技术 javascript jquery ajax
2021-01-26 09:45:08

我需要编写一个使用 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."
    

问题:

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

6个回答

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

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

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

最后,你可以格式化所有的数据,包括您的配置文件和文本文件你作为有效的JavaScript代码中提到-即收拾story1.txtstory1.js像:

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

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

还可以使用数据 URL在 HTML 文档中嵌入文件
2021-03-15 09:45:08
我不希望用户使用安装程序 / 来安装网络服务器,或安装插件(它甚至不能跨浏览器兼容)。但我也不能告诉他关闭他的浏览器,然后用这个标志重新打开它。所以我只是将所有文件更改为 js-Files。它不如纯文本或 JSON 文件漂亮,但效果很好。
2021-04-04 09:45:08

如果您只需要一个快速简便的“合法”Web 服务器来诱使您的浏览器认为它不是从本地文件系统中提取的,那么只需使用 Python 的简单 HTPP 服务器。它只是根据请求从调用它的任何目录提供文件。否则服务器很笨。它不会执行 PHP 脚本或任何东西。就是这样:

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

cd /Users/codemonkey/myCoolNewApp(例如在 Mac 上)

  1. 运行以下命令:

    python -m SimpleHTTPServer 80

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

须藤 python -m SimpleHTTPServer 80

  1. 打开浏览器并输入:

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

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

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

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

每个现代浏览器都会阻止这一点,因为您不能从任何用户读取本地文件。即使您从本地主机运行。

是的,这是一个死胡同。但是,如果您只有少量文件,那么将所有文件放在同一个目录中是相当可观的。所以这对我来说没有选择 - 整个代码会一团糟。尽管如此+1,因为在这种情况下这将是正确的答案。
2021-03-31 09:45:08

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

是的,但是当我将它导入到 android 应用程序中时,它又无法工作了:/
2021-03-26 09:45:08

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

应该能够在本地运行,不需要服务器

那么软件是怎么上机的呢?除非您打算在后期发送 DVD,否则该软件的部署可以作为 HTML5 应用程序使用基于清单的缓存(所有现代浏览器都支持,包括 Chrome、MSIEFirefox)。这不适合将数据存储为普通文件 - 但您可以将数据保存在本地存储中。