如何利用HTML模板实现组件的跨页面复用-html教程-PHP中文网

无法跨页面复用，因其仅存在于当前页面DOM内存中，页面卸载即销毁；可行方案包括JavaScript动态加载、Web Components封装及构建工具预处理。

如何利用html模板实现组件的跨页面复用

<template></template> 本身不支持跨页面复用——它只在当前 HTML 文档内生效，刷新或跳转到新页面后，<template></template> 内容不会自动带过去，也不会被其他页面读取。想靠它“一份写、多页用”，直接行不通。

为什么 `<template></template>` 不能跨页面复用

浏览器把每个 HTML 文件当独立上下文处理。<template></template> 是 DOM 节点，只存在于当前页面的内存中；页面卸载时整个 DOM 被销毁，模板自然消失。它不是文件、不是模块、也不参与网络请求，纯属本地结构占位符。

你无法在 page2.html 中用 document.getElementById('my-template') 拿到 page1.html 里定义的模板
即使把模板代码复制进每个页面，也违背“复用”本意——改一处还得手动同步所有页面
<template></template> 不触发渲染，但也不提供加载、缓存、路径解析等能力，无法替代文件引用机制

真正能跨页面复用的方案只有三种可行路径

要让同一套 HTML 结构出现在多个页面且集中维护，必须借助外部资源加载或构建阶段介入：

Gradle 9.8.0

下载

JavaScript 动态加载：用 fetch('nav.html') 在每个页面运行时拉取外部 HTML 片段，再注入 DOM。适用于 GitHub Pages、Netlify 等静态托管环境，但需确保同源、路径正确、错误处理到位
Web Components（Custom Elements）：封装成 <site-nav></site-nav> 这类自定义标签，把模板逻辑写在 JS 类里（如 connectedCallback 中 fetch 加载并渲染），所有页面引入同一份 components.js 即可复用
构建工具预处理：用 Webpack + html-loader 或 Vite + vite-plugin-html，在打包时把 header.html 内容直接插入到生成的每个 HTML 文件中。输出的是纯静态 HTML，无运行时依赖，适合 SEO 和 CDN 部署

`data-*` 属性配合模板工厂函数是轻量级折中方案

如果你不想引入构建流程，又希望避免重复写模板结构，可以结合 <template></template> 和 data-* 实现“逻辑复用”而非“结构复用”：

在每个页面都放一份相同的 <template id="card"></template>（结构一致，不冗余）
统一用一个外部 JS（如 templates.js）定义 renderCard({ title, content }) 工厂函数
各页面通过 data-template="card" + data-title="xxx" 声明意图，由工厂函数读取 dataset 并填充模板
这样结构仍需存在多份，但填充逻辑、事件绑定、样式规则全部集中，维护点只有一个

跨页面复用的本质是打破单页边界，要么靠运行时加载（JS fetch）、要么靠构建时合并（Webpack/Vite）、要么靠浏览器原生组件注册（Custom Elements）。指望 <template></template> 自己跨页面，就像指望一个 div 记住上个页面的 scrollTop —— 它没这个设计职责。