如何在所有HTML页面中引入公共头部（无需PHP）

你完全可以只用HTML或JavaScript实现头部组件的复用，下面是具体步骤和两种可行方案：

第一步：优化你的header.html #

当前的header.html是完整的HTML文档，复用的时候只需要保留头部组件的核心内容即可，删除外层的<!DOCTYPE html>、<html>、<head>、<body>标签，只保留头部导航的容器部分，同时把依赖的CSS/JS移到主页面中（避免重复加载）。

修改后的header.html代码：

<div id="header">
    <nav class="navbar navbar-expand-lg" >
        <div class="container-fluid">
            <a class="navbar-brand" href="index.html">
                <img class="logo-style" src="assests/logo.svg" alt="White Aim">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mb-2 mb-lg-0 navbar-text">
                <li class="nav-item mx-2">
                    <a class="nav-link active" aria-current="page" href="index.html">الصفحة الرئيسية</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="about-us.html">نبذة عنا</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="our-experience.html">خبرتنا</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="contact-us.html">تواصل معنا</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="profile.html">الملف التعريفي</a>
                </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

方案一：原生JavaScript Fetch API（推荐） #

这是最灵活可靠的方案，能完美适配Bootstrap的交互组件：

1. 在需要引入头部的主页面（比如index.html）的<body>开头，添加一个空容器用于放置头部：

<div id="header-container"></div>

2. 在主页面的</body>标签之前，添加以下JavaScript代码：

// 加载header.html内容并插入到容器中
fetch('header.html')
  .then(response => response.text())
  .then(data => {
    document.getElementById('header-container').innerHTML = data;
    // 重新初始化Bootstrap折叠组件，确保导航菜单正常工作
    if (typeof bootstrap !== 'undefined') {
      document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => {
        new bootstrap.Collapse(el);
      });
    }
  })
  .catch(error => console.error('加载头部组件失败:', error));

3. 主页面的<head>标签中必须保留所有依赖的CSS和JS（因为已经从header.html中移除）：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <title>你的页面标题</title>
</head>

方案二：HTML <object> 标签（快速实现） #

这种方法更简单，但在样式适配和交互上有局限性，适合快速测试：

在主页面的<body>开头直接添加：

<object data="header.html" width="100%" height="auto"></object>

注意：使用此方法时，header中的链接路径是相对于header.html的位置，若主页面在不同目录需调整路径；另外Bootstrap的交互可能需要额外处理。

关键注意事项 #

• 若直接用file://协议打开本地HTML文件，Fetch API会因跨域限制失效，需启动本地服务器运行网站，比如用Python执行python -m http.server（Python3），或Node.js的http-server工具。
• 所有主页面需统一引入依赖的CSS/JS，不要重复放在header.html中，避免资源重复加载。

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