如何讓html引用公共佈局（多個html檔案公用一個header.html和footer.html）

Running°つ發表於2020-05-16
HTMLHeader

如何實現多個.html靜態頁，引用同一個header.html和footer.html檔案？

直接上程式碼：

公共頭部檔案：header.html

//不用寫標準的html文件格式
<div> 
     頭部內容
</div>

公共尾部檔案：footer.html

//不用寫標準的html文件格式
<div> 
     頁尾內容
</div>

js檔案：

當前方法：通過load()函式，引入公共頭部和尾部檔案; 
程式碼預覽： 
$(".headerpage").load("header.html"); 
$(".footerpage").load("footer.html");

html全部檔案：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo演示</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 頂部導航 -->
<div class="headerpage"></div>
<!--頂部導航 over-->    

<!--中部主體--> 
    <p>···程式碼省略···</p>
<!--中部主體 over-->  

<!--footer-->  
<div class="footerpage"></div>
<!--footer over-->

<script src="js/jquery.min.js"></script>
<script>
    $(function(){
        /*公共部分
         * 導航欄
         * footer CopyRight
         */
        $(".headerpage").load("header.html");
        $(".footerpage").load("footer.html");
    });
</script>
</body>
</html>

通過上面的描述，可以發現：

在header.html和footer.html檔案中，並非是標準的html文件格式！
與此同時，通過index.html中的jQuery函式load()將上述的兩個公共檔案引入進來，從而形成一個完整的頁面；
並且，不會影響到其他頁面對於公共檔案的引用和使用；

以上就是關於靜態html檔案，使用公共頭部和尾部的解決辦法之一。

相關文章