在没有服务器的情况下加载 JSON 文件

Posted 2023-02-27

【中文标题】在没有服务器的情况下加载 JSON 文件

【英文标题】：Load a JSON file without server

【发布时间】：2020-02-01 02:24:57

【问题描述】：

我有一个很大的 json 文件 (+-10mb)。我想在位于 html 网页中的 javascript 函数中加载这个 json 文件 (myjson.json)。我在谷歌上找到了很多答案，比如“重命名为 myjson.js”并添加 var data = " yourjson" 并在您的 html 文件中包含 myjson.js 并访问变量数据。这不是我想要的。我想加载 JSON 文件而不重命名/更改它并且没有网络服务器（无 AJAX）。

谁能帮帮我？

  $.getJSON('myjson.json', function(myjson) ...

不会工作。

包含 css 和 js 功能如此简单，为什么没有网络服务器就无法访问本地存储的 json 文件？

编辑：json 文件的第一行

["participants": ["a", "b"], "conversation": ["sender": "b", "created_at": "2019-09-23T22:04:42.083698+00:00", "text": "xxx",

编辑：添加我的 js 以进行澄清

编辑：不能，因为我在移动设备上，代码格式在这里不起作用

【问题讨论】：

所以，你不想做任何可行的事情；你只想做那些行不通的事情。你需要我们的帮助，让那些不起作用的东西发挥作用。我有这个权利吗？

@Flimzy 与加载 css 文件的方式相同。这不可能吗？本地css文件不需要服务器，为什么本地json文件需要呢？

CSS 文件也是从服务器加载的。如果您在本地加载它，那么它将您的本地磁盘/系统视为服务器。 “服务器”是提供文件的任何计算机系统。在本地加载时，这意味着您的本地系统。

出于安全原因不能这样做。 （因为读入 JavaScript 的数据可能很敏感，如果双击电子邮件附加的 HTML 文档，然后运行一些 JS 来搜查用户的硬盘以获取机密以发回给发送电子邮件的人，那就太糟糕了)

XHR/Fetch 是首先将 JSON 加载到文档中的唯一方法。因此，任何特定于它们的答案对于将 JSON 加载到文档中的所有方法都是通用的。 （并且 XHR 和 Fetch 应用相同的安全限制）。所以它是仍然是重复的。

【参考方案1】：

不幸的是，XHR 和 Fetch API 都与 HTTP 密不可分，除非涉及 HTTP 服务器，否则不能用于从相对路径加载资源。如果您通过 file: URL 加载页面，您将无法使用 XHR 或 Fetch 获取该数据。

只有两种方法可供您使用：

切换到 JavaScript 而不是常规 JSON 并使用 <script> 标记（如之前在另一个答案中向您建议的那样）

允许用户拖放 JSON 文件（或使用 <input type="file">）以获取文件引用，然后您可以加载该引用。

【参考方案2】：

我认为您正在寻找 FileReader：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

如果你有它的工作，看看 JSON.parse()：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse