内容以避免重复代码
" />
本文介绍一种基于原生 JavaScript 的轻量级方案：通过外部 head.html 文件集中管理公共 标签（如 CDN 链接、meta 信息等），并在各页面加载时动态注入，实现一次编写、多页复用，无需构建工具或服务端渲染。
本文介绍一种基于原生 javascript 的轻量级方案：通过外部 `head.html` 文件集中管理公共 `
` 标签（如 cdn 链接、meta 信息等），并在各页面加载时动态注入，实现一次编写、多页复用，无需构建工具或服务端渲染。在多页面静态网站开发中，频繁在每个 HTML 文件的
中重复书写相同的资源引用（如 Bootstrap CDN、字体链接、SEO meta 标签、全局脚本等）不仅增加维护成本，还容易因疏漏导致不一致。虽然现代前端框架（如 React/Vue）或构建工具（如 Webpack、Vite）可通过模板继承或组件化解决，但对纯静态项目或学校级轻量应用而言，引入复杂工具反而得不偿失。一个简洁、兼容性好且零依赖的解决方案是：将公共 内容抽离为独立的 head.html 文件，并利用 JavaScript 在页面加载完成后动态插入到当前文档的 中。
✅ 实现步骤
-
创建 head.html 文件
在项目根目录（或统一路径下）新建 head.html，仅包含需复用的 片段（注意：不要包含 或 标签本身）：
<!-- head.html -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- 可按需添加其他公共资源：字体、分析脚本、PWA manifest 等 -->-
在目标页面中注入 head.html
在每个需要复用头部内容的 HTML 文件中（如 about.html、contact.html），于 内或 底部添加以下 JS 脚本：
<script>
document.addEventListener('DOMContentLoaded', async () => {
try {
const response = await fetch('head.html');
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
const headContent = await response.text();
const headElement = document.querySelector('head');
if (headElement) {
headElement.insertAdjacentHTML('afterbegin', headContent);
}
} catch (error) {
console.warn('⚠️ 无法加载 head.html，跳过注入:', error.message);
}
});
</script>? 提示：建议将上述脚本保存为独立文件（如 js/inject-head.js），然后在各页面中统一引入：
<script src="js/inject-head.js" defer></script>这样更利于缓存与维护。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项与最佳实践
- 同源限制：fetch() 要求 head.html 与当前页面同源（协议、域名、端口一致）。若直接双击打开本地 HTML 文件（file:// 协议），浏览器会因 CORS 策略拒绝请求。✅ 解决方案：使用本地服务器预览（如 VS Code 的 Live Server 插件，或运行 npx serve）。
-
加载时机：使用 DOMContentLoaded 确保 DOM 就绪后再注入；insertAdjacentHTML('afterbegin') 保证新内容位于 最前，避免覆盖原有标签（如
）。 - 错误降级：代码已内置 try/catch 和 response.ok 检查，当 head.html 不可用时，页面仍可正常渲染，仅缺失复用资源——这对教学项目或原型开发非常友好。
-
SEO 与爬虫兼容性：此方案为客户端注入，搜索引擎爬虫可能无法执行 JS，因此关键 SEO 标签（如
、<meta name="description">）<strong>不应</strong>放入 head.html，而应保留在各页面自身 中。
✅ 总结
该方法以极小的学习成本和零构建依赖，解决了静态网站中
冗余问题。它不改变现有工作流，兼容所有现代浏览器，特别适合课程设计、个人作品集、内部文档站等轻量场景。如后续项目规模扩大，再平滑迁移到模板引擎（如 EJS）或静态站点生成器（如 Jekyll）即可。核心原则始终不变：关注点分离 + 单一可信源（Single Source of Truth）。
