进行网站开发时，头部导航栏及底部信息基本每个页面都会有，为了减少重复代码，往往都会提取出来作为公共部分。
方法一：使用iframe框架（不建议使用）
如引入公共部分底部页面代码示例，不过iframe中的样式需要自己微微调整下。
//使用div包裹起来，防止样式发生改变
<div class="footer">
<iframe src="footer.html" width=""; height="" frameborder="0" scrolling="no" ></iframe>
</div>
现在已经很少有人在使用，大概原因有这几点：
第一点:iframe创建要慢 1-2 个数量级。
第二点:window 的 onload 事件需要在 iframe 加载完毕后才会触发，这样就照成堵塞Onload事件。
第三点:浏览器对相同域的连接有限制,而iframe和主页面共享连接池，所以会照成主页面的资源加载阻塞。
第四点：不利于爬虫录入。
第五点：移动端对iframe不友好。
方法二：使用jQuery
<div class="header"></div>
<div class="footer"></div>
//引入jQuery
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(".header").load("header.html");
$(".footer").load("footer.html");
</script>
如果使用原生js写的官网，只是为了调用公共部分，而引入一个jQuery文件，有点浪费资源，可以使用ajax加载公共页面部分。
方法三：使用ajax
//调用函数，使用
ajaxFunction("footerID", "footer.html")
//使用ajax加载公共页面部分
function ajaxFunction(id, url) {
//获取传入的id
let elemId = document.getElementById(id);
//判断传递ID的元素在页面中不存在
if (!elemId) {
return;
}
let xmlHttp; //创建对象
xmlHttp = new XMLHttpRequest();
// Firefox, Opera 8.0+, Safari
if (xmlHttp.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
//IE
let XMLArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP.2.0'
]
let XMLArrLength = XMLArr.length;
for (let i=0;i<XMLArrLength;i++) {
try{
xmlHttp = new ActiveXObject(XMLArr[i]);
break;
}catch(e){}
}
}
//进行初始化，设置请求方法和url,true 异步
xmlHttp.open("GET", url, true);
//发送请求
xmlHttp.send(null);
//绑定返回结果
xmlHttp.onreadystatechange = function() {
// readyState 状态4 代表返回所有结果
if (xmlHttp.readyState == 4) {
//获取响应并提取第二个html页面的主体部分，避免将第二个页面的标题部分插入到第一个页面的元素中
let respText = xmlHttp.responseText.split('<body>');
//截取的内容插入页面中，innerHTML将代码片段进行渲染
elemId.innerHTML = respText[1].split('</body>')[0];
}
}
}
不用单独引入jQuery，直接在原生js中写就行，减少了资源的加载。
方法四：写成js
共用head.js,底部foot.js在主页文件代码的开始位置和结束位置分别增加引入代码:
<script src='head.js'>
<script src='foot.js'>
头部js代码块示例：
document.writeln("<html lang="zh-CN">");
document.writeln("<head>");
document.writeln("<title></title>");
document.writeln(" <link href='head.css' rel="stylesheet" type="text/css" />");
document.writeln("</head>");
document.writeln("<body >");
document.writeln(" <div class='header'>");
document.writeln(" <ul>");
document.writeln(" <li><a href="">首页</a></li>");
document.writeln(" <li><a href="">品牌</a></li>");
document.writeln(" <li><a href="">介绍</a></li>");
document.writeln(" <li><a href="">关于</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
document.writeln("</body>");
document.writeln("</html>");
有HTML转js的工具：tool.chinaz.com/Tools/Html_… 但是个人不太喜欢这样做。
还有就是可以使用innerHTML进行内容填充，个人也不太喜欢这样弄。
document.getElementById("header").innerHTML = "....";
document.getElementById("footer").innerHTML = "....";
方法五：使用后端语言如php等，还有使用SSI（Server SideInc lude)服务器端嵌入。
因为才疏学浅，所以这里就提一嘴。还有不少方法，搜下都会有。
个人习惯
使用js,jQuery，iframe,对于seo都不太友好，如果对于seo优化不是很严格，个人的做法就是确保首页内容被抓取到，也就是头部内容在首页写死，不使用引入公共的方式，而其他页面都使用引入公共方式，减少代码重复。 不知道这样的做法对不对，如果有问题，请诸位指正。
