如何在不同 HTML 页面间动态加载并显示指定 div 的内容-html教程-PHP中文网

如何在不同 HTML 页面间动态加载并显示指定 div 的内容

本文介绍使用 fetch api 和 domparser 从一个 html 页面中提取特定 div 的文本内容，并安全地注入到另一个页面的目标 div 中，适用于跨页面静态内容共享场景。

本文介绍使用 fetch api 和 domparser 从一个 html 页面中提取特定 div 的文本内容，并安全地注入到另一个页面的目标 div 中，适用于跨页面静态内容共享场景。

在 Web 开发中，有时需要在不刷新当前页面的前提下，将另一个 HTML 文件中某个元素的内容动态加载并展示出来。例如，你希望在 Users.html 中实时显示 Index.html 中 <div id="source"> 的文本内容。由于浏览器同源策略限制，直接通过 JavaScript 跨页面读取 DOM 不可行，但可通过 <strong>HTTP 请求 + HTML 解析</strong>的方式优雅实现。<h3>实现原理</h3> <p>核心思路是： </p> <ol> <li>使用 <code>fetch() 向 Index.html 发起 GET 请求，获取其完整 HTML 字符串；

利用 DOMParser 将响应文本解析为内存中的 DOM 文档；

在该临时文档中定位 #source 元素，提取其 .textContent（推荐用于纯文本）或 .innerHTML（如需保留简单 HTML 结构）；

将结果写入当前页面的 #target 元素。

完整代码示例（Users.html）


<title>Users Page</title><div id="target">
    <!-- 动态内容将插入此处 -->
  </div>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      fetch('Index.html')
        .then(response => {
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          return response.text();
        })
        .then(html => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, 'text/html');
          const sourceEl = doc.getElementById('source');

          if (!sourceEl) {
            throw new Error('Element with id="source" not found in Index.html');
          }

          // ✅ 推荐：仅插入纯文本（防 XSS）
          document.getElementById('target').textContent = sourceEl.textContent;

          // ⚠️ 若需渲染 HTML（如含 <strong>、<br> 等），请先净化：
          // const cleanHTML = DOMPurify.sanitize(sourceEl.innerHTML);
          // document.getElementById('target').innerHTML = cleanHTML;
        })
        .catch(err => {
          console.error('Failed to load source content:', err);
          document.getElementById('target').textContent = '加载失败，请检查网络或文件路径。';
        });
    });
  </script>

注意事项与最佳实践

路径需正确：确保 Index.html 与 Users.html 位于同一服务器目录下，或使用相对/绝对路径（如 ./pages/Index.html）；
本地文件限制：若直接双击打开 HTML（file:// 协议），现代浏览器会因 CORS 策略拒绝 fetch 请求——务必通过本地服务器运行（如 VS Code Live Server、npx serve 或 Python 的 python -m http.server）；
安全性优先：
- 使用 .textContent 可天然防止 XSS 攻击；
- 如确需渲染 HTML 内容，必须引入 DOMPurify 进行过滤，严禁直接赋值 innerHTML；
错误处理不可省略：网络异常、文件不存在、目标元素缺失等均应有降级提示；
性能考虑：该方法适合小规模静态内容同步；高频或大数据量场景建议改用 JSON API 或服务端模板渲染。