Edge浏览器动态客户端Include问题：jQuery load()本地运行异常

阿华AIGC实验室

2026-5-20

解决Edge浏览器本地运行时jQuery load()无法加载动态HTML的问题

我之前在调试本地静态页面时也踩过类似的坑，结合你描述的情况——Plunkr在线环境两种方案都正常，但本地仅原生JS方法有效，核心问题大概率出在Edge对本地file://协议的安全限制上，下面给你几个亲测有效的解决思路：

1. 临时调整Edge的本地文件访问权限

Edge默认会限制本地文件中的脚本跨文件访问，这会导致jQuery的load()方法在file://协议下无法正常读取外部HTML文件：

打开Edge，在地址栏输入 edge://flags/#allow-file-access-from-files
找到「Allow file access from files」选项，设置为「Enabled」
重启Edge后再测试，jQuery的load()应该就能正常工作了

⚠️ 注意：这只是本地调试的临时方案，不要在日常浏览时保持这个设置，避免安全风险。

2. 用原生Fetch API替代jQuery load()

原生Fetch API在file://协议下的兼容性比jQuery的load()更好，而且写法也不复杂，替换后的代码示例：

function loadNavigation() {
  // 加载navigation.html
  fetch('navigation.html')
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }
      return response.text();
    })
    .then(htmlContent => {
      // 将HTML插入到目标容器
      document.getElementById('your-nav-container-id').innerHTML = htmlContent;
    })
    .catch(err => console.log('导航加载出错:', err));
}
// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', loadNavigation);

3. 本地搭建HTTP服务器（最推荐）

file://协议的限制本质是因为它不是标准的HTTP环境，搭建一个简易本地服务器能完全模拟生产环境的访问方式，彻底解决这类问题：

Node.js方案：安装http-server工具（需要先安装Node.js）
```
npm install -g http-server
```
然后在项目根目录运行：
```
http-server
```
接着用Edge访问http://localhost:8080，两种加载方案都会正常工作。
Python方案：如果有Python环境，直接在项目根目录运行：
```
# Python 3
python -m http.server
# Python 2
python -m SimpleHTTPServer
```
访问http://localhost:8000即可。