目的:解决每个页面都做相同修改的问题。
问题:由于每个页面都有相同的头部,当头部内容需要修改时每个页面都要修改。
解决:
jQuery load()方法,将文件内容添加到指定div.
- 将头部放到单独html页面,形成模板。
- 在需要引入头部的页面中添加容器div
- 使用load()方法将模板添加到容器div
/**
加载模版片段
依赖jquery
@param callback function(id,status,response)
} */
function load_templates(callback) {
var templates = document.querySelectorAll('.html_template');// 容器div
Array.prototype.slice.call(templates)
.forEach(function (temp) {
var id = temp.getAttribute("id");
//console.log("to be load " + id);
$("#"+id).load('/template/'+id+'.html',function(response,status,xhr){
callback(id,status,response);
});
})
}