HTML公共部分如何复用？实用技巧分享

• 首页 HTML 中手动写入
  ...
  ，保证首屏完整
• 用 document.addEventListener('DOMContentLoaded', ...) 延迟加载 footer.html 这类非阻塞内容
• 避免在 里 fetch，容易触发 parser-blocking

Vite 项目里怎么复用 header.html？别碰 raw 插件

import header from './header.html?raw' 看似简单，但只是读成字符串，你得自己 el.innerHTML = header，还得手动处理 script 标签执行、事件绑定丢失、重复插入等问题——实际比写两遍还累。

正确做法是用社区验证过的方案：

• 装 vite-plugin-html，在 vite.config.ts 里配 inject: { data: { header: fs.readFileSync('./src/_shared/header.html', 'utf8') } }，模板里用 <%= header %>
• 或者更现代的：把公共块写成 .vue 单文件组件（哪怕只含 template），
  复用干净利落，还能响应式更新
• 千万别用 fs.readFileSync 在客户端代码里读文件——Node.js API 浏览器里根本不存在

用 iframe 套公共页脚？小心样式泄漏和 SEO 归零

虽然 能“复用”，但它创建的是独立上下文：父页 CSS 不进 iframe，JS 不能跨域通信，搜索引擎几乎不索引 iframe 内容。对 SEO 敏感的页脚版权信息、联系方式，等于白写。

除非你明确要隔离（比如嵌第三方 widget），否则这招是自废武功：

• iframe 高度自适应极难做，scrolling="no" 容易切掉内容
• 移动端双滚动条、焦点跳转异常是常态
• 所有分析脚本（GA、埋点）默认不进 iframe，需单独部署

真想隔离样式又复用结构，用 Shadow DOM + template 标签才是正解，不过得接受 IE 全系不支持。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。