如何讓html引用公共布局（多個html文件公用一個header.html和footer.html）

如何實現多個.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文件，使用公共頭部和尾部的解決辦法之一。
Tags:

VirMach 便宜 VPS

QNews

QNews