如何使用 JavaScript 在多个 HTML 页面中包含共享页眉和页脚？

使用 JavaScript 在多个 HTML 页面中包含共享页眉和页脚

在 Web 开发领域，通常需要创建跨多个 HTML 页面通用的页眉和页脚部分HTML 页面。这不仅简化了页面创建，还确保了网站设计的一致性。

使用 JavaScript 包含页眉和页脚文件

虽然可以使用各种框架来实现此任务，我们也可以仅使用 HTML 和 JavaScript 来有效地完成它。输入 jQuery，这是一个强大的 JavaScript 库，可简化 DOM 操作和异步请求。

实现

1.创建 Index.html 文件：

    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            $("#header").load("header.html");
            $("#footer").load("footer.html");
        });
    </script>


    <div>
<p><strong>2.创建 header.html 和 footer.html 文件：</strong></p>
<pre class="brush:php;toolbar:false"><!-- header.html -->
<a href="http://www.google.com">click here for google</a>

<!-- footer.html -->
<a href="http://www.google.com">click here for google</a>

说明

index.html 文件包含页眉和页脚 div，这将使用 jQuery 中的 load() 方法进行填充。 jQuery 代码片段在页面加载时执行，异步检索 header.html 和 footer.html 的内容并将其插入到各自的 div 元素中。

优点

这种方法有几个好处：

• 可重用性：页眉和页脚可以根据需要包含在任意多个 HTML 页面中，从而无需重复编码。
• 简化维护：如果共享部分有任何更改，可以在在一个位置制作并反映在所有页面上。
• 独立于框架：这种技术不依赖于外部框架，使其可以在更广泛的环境中访问。

通过使用 JavaScript，您可以轻松创建通用的页眉和页脚页面，从而增强网站设计的一致性和可维护性。