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

Loading local files with Javascript without a web server

提问by maja

I need to write a software that uses HTML5 and canvas.

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

The whole software should be able to run locally, without the need of a server. So I'm only able to use Javascript, no php.

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

The difficult part: I have to dynamically fetch the content of text-files which are needed during operation.

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

For example: When the software starts, I need the "config.json". And after the user made some desicions, I need "story1.txt" or "story2.txt" and so on.

例如：当软件启动时，我需要“config.json”。在用户做了一些决定之后，我需要“story1.txt”或“story2.txt”等等。

My Problem:

我的问题：

I can't use Ajax, because Chrome blocks it - local Files aren't allowed to fetch other files' content. I always get an error-Message.

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

What I've tried so far:

到目前为止我尝试过的：

• Load Files with Ajax & jQuery

  Chrome doesn't allow me to load the file

• Load File into script-Tag

  Even if I declare the JSON-File as js-Code, I can't access the content of the loaded File

• Load File into invisible Iframe, and read its content

  Loading works, and I can see the code. But when I try to access the IFrame's content, I get the Chrome Error-Message again:

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

• 使用 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."
  

Question:

题：

Is there a way to load a Textfile dynamically, or am I forced to use a Webserver?

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

采纳答案by Oleg V. Volkov

If you insist on using Chrome, it have some command line flags to allow access to/from local originated files (--allow-file-access-from-files/ --disable-web-security). Do note that you need to run entire browser from scratch with those flags - i.e. if there's already any other Chrome windows open flags WON'T have any effect and that effect persists across ALL windows until Chrome is closed, which is, obviously huge hole in security.

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

You can set up a lightweight local server if you pack your "application" with some kind of automated setup script. This is still not very good, because you'd need to install executable that user might not want or even be completely unable to install due to restrictions.

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

You can pack your HTML/JS-based app as Chrome extension - extensions have much wider permissions than random code, but then you'd need to either distribute it through Google Play or provide instructions to manually install extensions for your users.

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

And finally, you can format all the data, including your configuration and text files your mentioned as valid JavaScript code - i.e. pack a story1.txtto story1.jslike:

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

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

and then just dynamically select stuff you need from corresponding vars or even use DOM manipulation to only load scripts you need through dynamically adding <script>tags. In my opinion that would be best option because it is less intrusive: it doesn't requires any installation/reconfiguration, it just works out-of-box.

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

回答by yeahdixon

I have found that firefox will run html and js locally.

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

回答by Alex Matan

If you just need a quick and easy "legal" web server to trick your browser into thinking that it isn't pulling from the local file system, just use Python's simple HTPP server. It simply serves up files on request from whatever directory it was invoked from. The server is otherwise dumb. It will not execute PHP scripts or anything. Here's how:

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

1. Install Python 2.7 on your development machine. This is the only thing that this fix will permanently install.
2. Open up your command line / terminal window.
3. Switch to the directory where your scripts reside.

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

cd /Users/codemonkey/myCoolNewApp (e.g. on a Mac)

cd /Users/codemonkey/myCoolNewApp（例如在 Mac 上）

1. Run the following:

   python -m SimpleHTTPServer 80

4. 运行以下命令：

   python -m SimpleHTTPServer 80

On a Mac or Linux box, you may need to use sudo:

在 Mac 或 Linux 机器上，您可能需要使用 sudo：

sudo python -m SimpleHTTPServer 80

须藤 python -m SimpleHTTPServer 80

1. Open up your browser and type in:

5. 打开浏览器并输入：

http://localhost/myapp.html(substitute "myapp.html" with your script name)

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

1. And the people rejoice.
2. To stop the web server, go back to the terminal window in which it is running and hit Ctrl-C. Or shut the computer down. This server will need to be restarted using step 4 each time you want to run it.

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

You can get really fancy and run multiple instances on different ports, but that's beyond the scope of this quick fix.

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

回答by Florian Potthoff

You have to put your local files on the same server. If you are running on local server you have to install some webserver as Apache to get access to your "remote" location.

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

Every Modern browser stops this, because you mustn't read local files from ANY USER. Even if you are running from localhost.

每个现代浏览器都会停止此操作，因为您不能从任何用户读取本地文件。即使您从本地主机运行。

回答by Stucco

Depending on your requirements, using fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) is an option:

根据您的要求，可以选择使用 fetch ( 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);
  });

回答by Yash Mangla

You can Load the Local file in Chrome Browser locally without Using AJAX. you can use normally use jQueryfunction like $.getJSON()for loading the file in chrome browser.

您可以在本地加载 Chrome 浏览器中的本地文件，而无需使用AJAX。您可以使用像$.getJSON()这样的jQuery函数在 Chrome 浏览器中加载文件。

But if you use this jQuery functionality then chrome Web Securitywill Block your function to access file form files packages. On Firefox browser it perfectly runs but if your requirement is the chrome browser then you must need to set some Chromium Flags using Command Line.

但是，如果您使用此 jQuery 功能，那么chrome Web Security将阻止您访问文件表单文件包的功能。在 Firefox 浏览器上它完美运行，但如果您的要求是 chrome 浏览器，那么您必须使用命令行设置一些 Chromium 标志。

Here is Some steps for you to set Chromium Flags which enables you some extra features which helps you access the data file from your local system. these are:-

以下是设置 Chromium 标志的一些步骤，它为您提供一些额外的功能，帮助您从本地系统访问数据文件。这些是：-

1. Exitor closeany running-instance of chrome.
2. Find the shortcut you normally use to launch chrome.
3. Create a copyof it.
4. Right click on the new shortcut, and select Properties.
5. At the very end of the Target: text box, add a space and then the desired command line flags. It should something like: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security
6. click "apply"button and then "ok".
7. Double click the new shortcut to launch chrome with the new command line flags.

1. 退出或关闭chrome 的任何运行实例。
2. 找到您通常用于启动chrome的快捷方式。
3. 创建它的副本。
4. 右键单击新的快捷方式，然后选择“属性”。
5. 在 Target: 文本框的最后，添加一个空格，然后添加所需的命令行标志。它应该类似于： “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --allow-file-access-from-files --disable-web-security
6. 单击“应用”按钮，然后单击“确定”。
7. 双击新的快捷方式以使用新的命令行标志启动 chrome。

Note:Remember your Flags now set only for this chrome icon. so start your application with this chrome icon.

注意：请记住，您现在仅为此 chrome 图标设置了标志。所以用这个 chrome 图标启动你的应用程序。

回答by symcbean

What you are describing (and the proposed solution) seriouslyundermines the securityof the browser.

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

should be able to run locally, without the need of a server

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

So how does the software get on the machine? Unless you intend sending DVDs in the post, deployment of the software can be as an HTML5 app using Manifest based caching(supported in all modern browsers, including Chrome, MSIEand Firefox). What this does not cater for is storing data as normal files - but you can keep data in local storage.

那么软件是怎么上机的呢？除非您打算在后期发送 DVD，否则可以使用基于 Manifest 的缓存（支持所有现代浏览器，包括 Chrome、MSIE和Firefox）将软件部署为 HTML5 应用程序。这不适合将数据存储为普通文件 - 但您可以将数据保存在本地存储中。

回答by Miquel Las Heras

I would make a Chrome extension if your requirements allow that. They are easy to make and can work quite well for you. http://developer.chrome.com/extensions/index.html

如果您的要求允许，我会制作 Chrome 扩展程序。它们很容易制作并且可以很好地为您工作。http://developer.chrome.com/extensions/index.html