如何让HTML文件调用其他HTML内容实现模块化（无需服务器）

因为是直接双击打开本地HTML文件（使用file://协议），直接用fetch会触发浏览器的跨域限制，所以改用更兼容本地文件场景的XMLHttpRequest来实现，步骤如下：

1. 修改main-file.html #

在主文件里添加内容容器，再用JS加载并插入子文件内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主笔记文件</title>
</head>
<body>
    <!-- 子文件内容会插入到这个容器中 -->
    <div id="sub-container"></div>

    <script>
        function loadSubFile(filePath, targetId) {
            const request = new XMLHttpRequest();
            request.open('GET', filePath, true);
            request.onreadystatechange = function() {
                // 请求完成且成功时，将子文件内容插入目标容器
                if (request.readyState === 4 && request.status === 200) {
                    document.getElementById(targetId).innerHTML = request.responseText;
                }
            };
            request.send();
        }

        // 加载同目录下的sub-file.html
        loadSubFile('sub-file.html', 'sub-container');
    </script>
</body>
</html>

2. 确保文件路径正确 #

• 把main-file.html和sub-file.html放在同一文件夹里；如果子文件在子目录中，修改loadSubFile的第一个参数（比如'notes/sub-file.html'）。

3. 解决浏览器本地访问限制 #

如果加载失败，是浏览器默认限制了本地文件的跨域访问，可调整浏览器设置：

• Chrome：右键浏览器快捷方式，在目标栏末尾添加 --allow-file-access-from-files（注意前面有空格），重启浏览器。
• Firefox：地址栏输入about:config，找到security.fileuri.strict_origin_policy，设为false后重启。

批量加载多个子文件 #

后续要加载多个子文件时，只需重复调用函数并添加对应容器：

<!-- 新增多个容器 -->
<div id="sub-container1"></div>
<div id="sub-container2"></div>

<script>
// 加载多个子文件
loadSubFile('sub-file1.html', 'sub-container1');
loadSubFile('sub-file2.html', 'sub-container2');
</script>

内容的提问来源于stack exchange，提问作者Andrew Phillip