PHP require_once的前端替代方案：无服务器端脚本时复用页眉页脚

在没法用PHP这类服务器端脚本的场景里，有几种更规范、好维护的纯前端方案，能替代require_once的内容复用逻辑，具体实现如下：

方案1：HTML5 <template> + Fetch API（首推） #

用HTML原生的模板标签存复用内容，再通过Fetch加载外部HTML片段，既符合标准又容易维护。

步骤：

• 把页眉、页脚分别存成独立的HTML文件，比如header.html（包含<!DOCTYPE>到页眉导航的所有内容）、footer.html；
• 在主页面对应位置留好占位元素：

  <div id="header-container"></div>
  <!-- 页面主体内容 -->
  <div id="footer-container"></div>
  

• 写JS加载并插入内容：

  // 加载页眉
  fetch('header.html')
    .then(res => res.text())
    .then(html => {
      const container = document.getElementById('header-container');
      const template = document.createElement('template');
      template.innerHTML = html;
      container.appendChild(template.content.cloneNode(true));
    })
    .catch(err => console.error('页眉加载失败:', err));
  
  // 加载页脚同理
  fetch('footer.html')
    .then(res => res.text())
    .then(html => {
      const container = document.getElementById('footer-container');
      const template = document.createElement('template');
      template.innerHTML = html;
      container.appendChild(template.content.cloneNode(true));
    })
    .catch(err => console.error('页脚加载失败:', err));
  

方案2：优化版DOM片段插入（比innerHTML更安全） #

你提到的innerHTML确实有潜在XSS风险和DOM解析问题，改用Range.createContextualFragment能更安全地把HTML字符串转成DOM片段再插入：

async function loadSnippet(url, containerId) {
  try {
    const res = await fetch(url);
    const html = await res.text();
    const container = document.getElementById(containerId);
    const fragment = document.createRange().createContextualFragment(html);
    container.appendChild(fragment);
  } catch (err) {
    console.error(`加载${url}出错:`, err);
  }
}

// DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', () => {
  loadSnippet('header.html', 'header-container');
  loadSnippet('footer.html', 'footer-container');
});

方案3：静态内容预定义（适合更新频率低的场景） #

如果网站内容不常改，也可以把页眉页脚的HTML直接写成JS变量，直接插入页面省掉网络请求：

const HEADER_HTML = `
<!DOCTYPE html>
<html>
<head>
  <!-- 公共头部样式、元标签 -->
</head>
<body>
  <nav class="header-nav">
    <!-- 导航栏内容 -->
  </nav>
`;

const FOOTER_HTML = `
  <footer class="site-footer">
    <!-- 页脚内容 -->
  </footer>
</body>
</html>
`;

document.addEventListener('DOMContentLoaded', () => {
  // 替换页面的头部和尾部
  const existingHtml = document.documentElement.innerHTML;
  document.documentElement.innerHTML = HEADER_HTML + existingHtml.replace(/<!DOCTYPE[^>]*>|<html[^>]*>|<head[^>]*>.*<\/head>|<body[^>]*>/s, '') + FOOTER_HTML;
});

注意要点 #

• 跨域问题：如果复用的HTML文件和主页面不在同域名下，得确保服务器开了CORS允许跨域请求；
• 加载时机：一定要等DOM加载完再跑加载脚本（用DOMContentLoaded事件），不然找不到占位元素；
• 样式冲突：复用内容里的CSS最好加类名前缀，别和主页面样式打架；
• SEO影响：纯JS加载的内容可能被搜索引擎爬虫忽略，如果在意SEO，能提前用静态站点工具把内容合并好再上传（如果平台允许的话）。

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