浏览器禁止 iframe 直接读取本地 json 文件，因 file:// 协议下 origin 为 "null"，触发跨源限制；iframe 也不支持直接加载非 html 资源。推荐方案：开发时用本地 http 服务配合 fetch，离线时内联 json 或用 script 标签，必须用 iframe 时需通过 postmessage 通信。
iframe 无法直接加载并读取本地 JSON 文件
浏览器出于安全限制，iframe 加载 file:// 协议下的本地 JSON 文件（比如 file:///path/data.json）后，父页面 JavaScript 无法通过 iframe.contentWindow 或 iframe.contentDocument 访问其内容——会触发跨源错误（Blocked a frame with origin "null" from accessing a cross-origin frame），即使同是本地文件。这不是 bug，是 Chromium、Firefox 等主流内核的强制策略。
为什么不能用 iframe.src = "data.json"？
iframe 的 src 属性期望加载的是 HTML 文档（或可渲染资源），而非纯 JSON。即使浏览器能显示 JSON 内容（如 Chrome 自动格式化），该文档没有 DOM 结构，也无执行上下文，父页面无法从中提取数据。更关键的是：iframe.contentDocument 在加载非 HTML 资源时通常为 null，且即便存在，也会因 origin="null" 被拒绝访问。
真正可行的替代方案（3 种场景）
要读取本地 JSON 并在页面中使用，应绕过 iframe，改用以下方式：
-
开发阶段（推荐）：启动一个本地 HTTP 服务（如
python3 -m http.server 8000），把 JSON 放在./data.json，然后用fetch('./data.json')—— 这样 origin 是http://localhost:8000，无跨源问题。 -
单 HTML 文件离线使用：把 JSON 数据直接内联为 JS 变量（如
const data = { "name": "test" };），或用<script type="application/json"></script>标签包裹 JSON 字符串，再用JSON.parse(scriptEl.textContent)读取。 -
必须用 iframe 渲染 + 通信的极少数情况：需另建一个本地 HTML 包裹 JSON（如
json-wrapper.html?src=data.json），该 HTML 用fetch加载 JSON 并挂到window.parent，再由父页监听message事件接收数据 —— 但本质仍是绕开了直接读 iframe 内容。
容易被忽略的关键点
很多人卡在“为什么 console 能看到 iframe 加载了 JSON，却拿不到内容”，根本原因不是路径写错或语法问题，而是浏览器主动阻断了对 file:// iframe 的脚本访问权限。这个限制无法通过 allow-same-origin 或其他 sandbox 属性绕过。只要不走 HTTP(S) 协议，就不存在合法的跨域“同源”概念，origin="null" 永远是隔离的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
