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

我需要写一个软件，使用HTML5和画布

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

如果您的要求允许，我会制作一个Chrome扩展。它们很容易制作，可以很好地为您服务

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

每个现代浏览器都会停止这种操作，因为您不能从任何用户处读取本地文件。

---

即使您是从本地主机运行

如果您坚持使用Chrome，它会有一些命令行标志来允许访问本地源文件（

--允许从文件访问文件

/

--禁用web安全

）。请注意，您需要使用这些标志从头开始运行整个浏览器-即，如果已经有任何其他Chrome窗口打开标志将不会产生任何效果，并且这种效果将在所有窗口中持续，直到Chrome关闭，这显然是一个巨大的安全漏洞

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

您可以将基于HTML/JS的应用程序打包为Chrome扩展，扩展的权限比随机代码大得多，但您需要通过Google Play分发它，或者提供为用户手动安装扩展的说明

最后，您可以将所有数据（包括您提到的配置和文本文件）格式化为有效的JavaScript代码，即将

story1.txt

打包为

story1.js

，如：

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

然后，只需从相应的变量中动态选择所需的内容，甚至通过动态添加

标记，使用DOM操作只加载所需的脚本。在我看来，这将是最好的选择，因为它的侵入性较小：它不需要任何安装/重新配置，只是开箱即用。

您正在描述的内容（以及建议的解决方案）严肃地说

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

---

那么软件是如何在机器上运行的呢？除非您打算在post中发送DVD，否则该软件的部署可以作为HTML5应用程序使用（所有现代浏览器都支持，包括Chrome和）。这不适合将数据存储为普通文件，但您可以将数据保存在本地存储中。

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

您可以在Chrome浏览器中本地加载本地文件，而无需使用AJAX。您可以正常使用jQuery函数，如$.getJSON（）在chrome浏览器中加载文件

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

下面是设置Chromium标志的一些步骤，它使您能够使用一些额外的功能，帮助您从本地系统访问数据文件。 这些是：

退出或关闭任何正在运行的chrome实例

找到通常用于启动chrome的快捷方式

创建它的副本

右键单击新建快捷方式，然后选择属性

在Target:文本框的最后，添加一个空格，然后添加所需的命令行标志。应该是这样的： “C:\Program Files（x86）\Google\Chrome\Application\Chrome.exe”--允许从文件访问文件--禁用web安全性

单击“应用”按钮，然后单击“确定”

双击新的快捷方式以使用新的命令行标志启动chrome

---

注意：记住您的标志现在只为这个chrome图标设置。因此，请使用此chrome图标启动应用程序。

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

在开发机器上安装Python 2.7。这是此修复程序将永久安装的唯一内容

打开命令行/终端窗口

切换到目录wh

  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);
  });