如何使用 JavaScript 在多个 HTML 页面中重复使用页眉和页脚文件？

跨多个 HTML 页面合并通用页眉和页脚文件

网页的页眉和页脚部分可以包含在多个其他页面中分开页面？

当然！通过利用 JavaScript，您可以轻松地将常见的页眉和页脚文件包含到多个 HTML 页面中。

如何使用 HTML 和 JavaScript 包含页眉和页脚文件

1. 创建 JavaScript 函数：在要包含公共页眉和页脚内容的 HTML 页面中，调用 JavaScript 函数来加载这些外部内容文件。示例：

<script>
function loadHeaderFooter() {
  $("#header").load("header.html");
  $("#footer").load("footer.html");
}
</script>

2. 将 loadHeaderFooter 函数放置在 HTML 页面中：确保 loadHeaderFooter 函数调用放置在 内。页面的元素。
3. 为页眉和页脚添加 div 元素：创建和修改 HTML 元素，这些元素将用作外部加载的页眉和页脚内容的占位符：

<div>
<ol start="4"><li>
<strong>页面加载时调用loadHeaderFooter函数</strong>：使用jQuery页面加载完成后执行 loadHeaderFooter 函数：</li></ol>
<pre class="brush:php;toolbar:false"><script>
$(document).ready(loadHeaderFooter);
</script>

5. 创建 header.html 和 footer.html 文件：假设这些文件存在于同一个文件中目录作为您的主要 HTML 页面，您可以在这些单独的 HTML 中嵌入所需的页眉和页脚内容文件。

示例：

header.html

<a href="http://www.example.com">Header Link</a>

footer.html

<p>Copyright 2023</p>

使用外部的好处页眉和页脚文件：

• 代码可重用性：减少重复代码，增强可维护性。
• 一致的设计：确保统一多个页眉和页脚的外观
• 可扩展性：轻松更新或修改页眉和页脚内容，而不影响多个页面。