在Web开发中，JSON（JavaScript Object Notation）作为轻量级的数据交换格式，几乎无处不在。从配置文件到API响应，开发者经常需要在JavaScript代码中加载外部JSON文件。然而，随着浏览器生态的多样化——从老旧IE到现代Chrome、Firefox，甚至Edge，如何实现“一次编写，处处运行”的JSON导入方案，成为技术团队必须面对的挑战。本文将深入探讨一种兼容新旧浏览器的实用方案，帮助开发者告别兼容性焦虑。
浏览器兼容性：新旧鸿沟的根源
现代浏览器早已原生支持import语句和fetch API，直接通过ES Modules的方式导入JSON文件（如import data from './data.json' assert { type: 'json' }）已不是问题。然而，在IE 11及更早的浏览器中，这些新特性完全缺失，甚至部分旧版Chrome（如v61以下）也未能支持。更糟糕的是，一些企业级应用仍须运行在受限的旧版浏览器环境（比如Windows 7上的IE）。
传统做法是使用Ajax（XMLHttpRequest）同步或异步加载JSON，但这种方法在现代浏览器中因安全限制或性能问题已被逐渐淘汰。开发者需要一个既能在现代浏览器中利用最新语法，又能优雅降级到旧浏览器的通用方案。
理想方案：动态加载与特性检测结合
核心思路是：根据浏览器能力，选择最优加载方式，同时提供全功能降级。这里推荐一种基于动态<script>标签注入与fetch结合的分层策略，可完美覆盖所有主流浏览器。
第一步：特性检测
创建一段检测脚本，判断浏览器是否支持fetch与JSON.parse，以及是否支持import.meta等ES Module特性。如果支持，则直接使用fetch异步获取JSON并解析；若不支持，则回退到经典XMLHttpRequest方案。
第二步：JSONP模式作为兜底
对于不支持fetch的极旧浏览器（如IE 6-8），JSONP（填充式JSON）是有效的历史方案。开发者需在服务器端将JSON包装成回调函数形式，客户端通过动态创建<script>标签加载。但注意，JSONP只支持GET请求，且存在跨域安全风险。若数据来自同源，也可直接用XMLHttpRequest同步模式（不推荐，但旧浏览器中可行）。
第三步：整合成工具函数
示例代码如下（简化版）：
function loadJSON(url, callback) {
if (window.fetch) {
// 现代浏览器
fetch(url)
.then(response => response.json())
.then(data => callback(null, data))
.catch(err => callback(err));
} else if (window.XMLHttpRequest) {
// 支持XHR的旧浏览器
var xhr = new XMLHttpRequest();
xhr.overrideMimeType && xhr.overrideMimeType("application/json");
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
callback(null, JSON.parse(xhr.responseText));
} else {
callback(new Error('Load failed'));
}
}
};
xhr.send();
} else {
// 极端旧浏览器：使用JSONP（需服务器配合）
var script = document.createElement('script');
script.src = url + '?callback=handleJSON';
window.handleJSON = function(data) {
callback(null, data);
document.body.removeChild(script);
};
document.body.appendChild(script);
}
}
实战注意事项
- 跨域问题：若JSON文件位于不同域名，现代浏览器需服务端设置
Access-Control-Allow-Origin头；旧浏览器中JSONP可绕过，但存在安全限制。 - 缓存控制：建议给JSON URL添加时间戳或版本号，避免旧浏览器缓存过时数据。
- 错误处理：网络异常、JSON格式错误等均需回调妥善处理，避免页面崩溃。
- 性能考量：
fetch基于Promise异步，而旧浏览器XHR异步回调同样可靠，两者性能差异可忽略。同步XHR会阻塞UI，应避免使用。
行业趋势与最佳实践
如今，主流框架如React、Vue、Angular已内建了Webpack或Vite等构建工具，导入JSON通常经模块打包器处理（如import config from './config.json'），构建后生成兼容代码。但若需运行时动态加载，上述方案依然有效。
对于必须支持IE 11的环境，微软已于2022年6月停止对IE的多数支持，多数企业也逐步迁移至Edge。但仍有银行、政务系统等场景需兼容，因此一套健壮的JSON加载方案是技术负债的“压舱石”。
结语
从古老的IE到最新的Chrome，Web生态的碎片化要求开发者必须具备“渐进增强”的思维。通过动态检测、分层降级，我们可以在不牺牲现代体验的前提下，为所有用户提供可靠的JSON数据加载能力。这不仅是对技术的考验，更是对用户体验的尊重。未来，随着浏览器标准趋同，或许这一天会彻底消失，但在此之前，掌握这个技巧仍是每一位前端工程师的必修课。