如何使用 JavaScript 在 HTML 中建立可重複使用的頁首和頁尾？

為HTML 頁面建立可重複使用的頁首和頁尾檔案

簡介：

在Web 開發領域，經常會遇到這樣的情況：有利於創建可重複使用的元素，例如頁眉和頁腳，這些元素可以無縫整合在多個HTML頁面中。這種做法不僅簡化了維護，還確保了一致性和效率。

使用 JavaScript 的解決方案：

要解決這個問題，您可以利用 JavaScript，特別是 jQuery 的強大功能。透過利用其 load() 函數，您可以動態地將外部 HTML 檔案作為頁首和頁尾載入到主 HTML 文件中。

實作：

1. Index.html:

   • 新增庫。
   • 定義腳本標籤以使用 load() 函數載入 header.html 和 footer.html。
   • 建立佔位符
     ;頁首和頁尾的元素，具有唯一 ID。

   • Header.html 和 Footer.html：

     • 包含頁眉和頁腳必要的 HTML 內容，

   • 用法：

     • 存取index.html並觀察載入的頁首和頁腳

   範例程式碼：

   Index.html:

   
   ...
   <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></strong></p>Header.html 和Footer.html:<pre class="brush:php;toolbar:false"><a href="http://www.google.com">click here for google</a>

   透過採用這種基於JavaScript 的方法，您可以有效地將常見的頁眉和頁腳頁麵包含到HTML 文檔中，從而增強程式碼的可重用性並保持網頁之間的一致性。