HTML无法直接导入解析外部JSON文件，需用JavaScript通过fetch()请求并调用response.json()解析；script[type="application/json"]仅是内联存储，仍需手动JSON.parse()；HTML Imports已废弃。
HTML 本身不支持直接导入并解析外部文件内容（比如读取 data.json 并自动转成 JS 对象），<link>、<script src="..."></script> 或 <iframe></iframe> 都只是加载或嵌入，不触发解析逻辑。所谓“HTML 导入解析”，本质是前端 JS 主动发起请求 + 手动解析。
为什么 <script type="application/json"></script> 不算“导入解析”
这种写法只是把 JSON 字符串塞进 HTML 文档里，浏览器不会自动执行解析——它只是个普通 <script></script> 标签，类型声明仅作语义提示。真正要用，还得手动取 textContent 再调 JSON.parse()：
<script type="application/json" id="config">
{"theme": "dark", "timeout": 5000}
</script>
然后在 JS 中：
const configEl = document.getElementById('config');
const config = JSON.parse(configEl.textContent);
- 优点：无跨域问题，适合配置类静态数据
- 缺点：无法复用、不可缓存、HTML 体积膨胀、修改需重发整个页面
- 注意：
textContent比innerHTML更安全，避免 XSS 风险
fetch() + response.json() 是最常用协同方式
这是现代前端加载并解析外部 JSON 文件的标准路径，也是“HTML 导入”实际落地的主力方案：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
fetch('/api/config.json')
.then(r => r.json())
.then(data => console.log(data));
- 必须确保服务端返回
Content-Type: application/json，否则.json()会抛TypeError: Failed to parse JSON - 如果文件是纯文本（如
.txt或无正确 header 的.json），改用.text()再手动JSON.parse() - 不支持同步加载；若需阻塞渲染，得配合
async/await+ 服务端模板（如 SSR）
用 <link rel="import">？已废弃，别踩坑
HTML Imports 是旧版 Chrome 曾支持的特性，用于导入 HTML 片段，但2020 年起已被所有主流浏览器移除，且从没支持过自动解析 JSON 或 JS 模块。现在看到相关文档或代码，基本是遗留项目或过时教程。
- 替代方案：用
import()动态导入 ES 模块，或fetch()加载结构化数据 - 若项目仍在用 Polymer 1.x，升级到 Lit 或现代框架更实际
- 构建工具（如 Vite、Webpack）可通过插件在编译期注入 JSON，但这属于构建时行为，和运行时 HTML 导入无关
真正容易被忽略的是：文件解析是否成功，往往卡在服务端响应头或路径权限上，而不是 JS 写法。先确认 curl -I /data.json 返回 200 和正确的 Content-Type，再调试前端逻辑。
