使用 JavaScript 从本地 HTML5 Web 应用程序加载 JSON

Posted 2023-03-03

【中文标题】使用 JavaScript 从本地 HTML5 Web 应用程序加载 JSON

【英文标题】：Loading JSON from a local HTML5 web app using JavaScript

【发布时间】：2013-01-30 18:05:21

【问题描述】：

我正在开发一个小型 html5 网络应用程序，用户可以通过浏览器离线使用，跨平台。他们将收到 CD 或 USB 棒上的 wep 应用程序，然后双击 HTML 文件。 HTML 文件然后从同一目录/子目录本地加载 CSS、javascript 文件等。

到目前为止，一切都很好。但我还想加载一个包含 JSON 的文件（也是本地文件，来自同一个目录），并使用该数据构建 DOM 的一部分。

    $.getJSON("playlistcontent.json", function (json) 
        //use the data...
    );

在这里我遇到了著名的

Access-Control-Allow-Origin 不允许 Origin null

错误。有很多关于这个的资源，甚至是similar questions。但由于这是故意在本地进行的，因此建议的解决方案不起作用。

但是，由于 AJAX 是“异步”的，我认为可能有更“同步”或更好的方法？ JSONP 呢？

注意：我知道我可以在禁用安全检查的情况下启动浏览器（尤其是 Chrome），但这不适合我的用户。

【问题讨论】：

JSONP 只不过是一个包含函数调用的 JavaScript 文件。那么为什么不直接从 JSON 文件中创建一个 JavaScript 文件，方法是在 var data = 前面加上 script。然后将 ex-JSON 数据解释为对象字面量，并且数据在全局变量 data 中可用。

【参考方案1】：

我回答了一个类似的问题here。

您可以使用 HTML5 的 File API，其中包含 FileReader，然后在结果上调用 JSON.parse。

【讨论】：

但是如果没有用户交互，您无法自动读取文件。

确实如此。根据应用程序的用例，Marcel 可能更喜欢不同的方法。

我认为您无法从文件系统中读取文件。您只能从沙盒环境中打开文件，即您创建的文件。您只能通过文件输入或拖放从文件系统打开文件。

【参考方案2】：

我会使用 Felix Kling 的 JSONP 方法。将数据文件包装在回调函数中：

(function(data) 
  // Do things with your data object here
)(
  // Put your data object here as the argument to the callback
);

当你在这个脚本文件中包含一个标签时，回调函数会自动执行。

【参考方案3】：

我喜欢 Felix Kling 的方法，如果您只需要 JSON 数据，您可以通过设置 JS 变量来加载数据并使用脚本标签加载 JSON 文件。但是，如果这还不足以满足您的需求，您可以使用http://www.server2go-web.de/ 之类的解决方案，该解决方案将从 CD 运行网络服务器，从而绕过本地文件限制。

【讨论】：

这不符合我的跨平台要求，这就是我想首先将其作为 Web 应用程序的原因。