首頁 >web前端 >js教程 >如何使用 JavaScript 在多個 HTML 頁面中包含通用頁首和頁尾？

如何使用 JavaScript 在多個 HTML 頁面中包含通用頁首和頁尾？

Patricia Arquette原創: 2024-12-05 06:06:18920瀏覽

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中文網其他相關文章！

JavaScript jquery html for include using this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：同步與異步 JavaScript 簡化下一篇：同步與異步 JavaScript 簡化

看更多