HTML通过js的.load()方法加载页面头部和底部文件
贡建修
前言：
大部分网站的头部和底部都是一样的，把公共头部和底部分离出来，使用时直接引用比重复写在每个页面好的多，对于后期的维护和二次开发，也比较友好。实现方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML通过js的.load()方法加载页面头部和底部文件</title>
</head>
<body>
<!--头部-->
<div id="headerBox"></div>
<!--底部-->
<div id="fooderBox"></div>
</body>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//加载头部
$("#headerBox").load("/header.html", function() {
});
//加载底部
$("#fooderBox").load("/fooder.html", function() {
});
</script>
</html>
特别说明：在header.html中难免需要引用到图片（比如logo)，这时候logo的引用地址不能是header.html对应的相对路径，而应该是绝对路径（网站根目录下）。举个例子：
//相对路径
<img src="../../img/logo.png"/>
//绝对路径（/代表网站根目录）
<img src="/img/logo.png"/>
类似资料：