如何使用 JavaScript 在多个 HTML 页面中包含通用页眉和页脚？-js教程-PHP中文网

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

Patricia Arquette

发布： 2024-12-05 06:06:18

原创

924 人浏览过

How Can I Use JavaScript to Include Common Headers and Footers Across Multiple HTML Pages?

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

在 Web 开发中，通常需要包含公共元素，例如页眉和页脚，跨多个 HTML 页面以保持一致性和组织。这可以通过使用 JavaScript 来实现。

使用 jQuery 进行页眉和页脚包含

包含常见页眉和页脚文件的一种方法是通过 jQuery。此 JavaScript 库提供了一种简单有效的方法将外部内容加载到网页中。

创建 HTML 文件

对于这种方法，您将需要创建三个HTML 文件：

index.html: 包含主要内容和位置要包含的页眉和页脚。
header.html: 包含页眉内容。
footer.html: 包含页脚内容。

index.html代码

<html>
<head>
  <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>
</head>
<body>
  <div>

登录后复制

header.html 和 footer.html 代码

<!-- header.html -->
<a href="http://www.google.com">Click here for Google</a>

登录后复制

<!-- footer.html -->
<p>Copyright &copy; 2023</p>

登录后复制

加载页眉和页脚

创建 HTML 文件后，jQuery 的 load()方法用于将header.html和footer.html的内容分别异步加载到index.html中的#header和#footer元素中。

当用户访问index.html时，页眉和页脚都会被加载内容将呈现在页面上，从而在多个页面上提供一致且有凝聚力的用户体验。

以上是如何使用 JavaScript 在多个 HTML 页面中包含通用页眉和页脚？的详细内容。更多信息请关注PHP中文网其他相关文章！