一尘不染

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

javascript

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

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

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

例如:当软件启动时,我需要“ config.json”。在用户做出一些选择之后,我需要“ story1.txt”或“ story2.txt”,依此类推。

我的问题:

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

到目前为止,我已经尝试过:

  • 使用Ajax和jQuery加载文件

Chrome浏览器不允许我加载文件

  • 将文件加载到脚本标签中

即使我将JSON文件声明为js代码,我也无法访问已加载文件的内容

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

正在加载作品,我可以看到代码。但是,当我尝试访问IFrame的内容时,我再次收到Chrome错误消息:

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

题:

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


阅读 480

收藏
2020-05-01

共1个答案

一尘不染

如果您坚持使用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>标签仅加载所需的脚本。在我看来,这是最好的选择,因为它具有较低的侵入性:它不需要任何安装/重新配置,它可以直接使用。

2020-05-01