最近写网页的时候，发现页面都是用的同一个header头部、aside侧边栏和footer页脚，那么为什么不把这些写成一个模板文件，在页面中直接引入呢？这样还方便后期的修改维护。
查了一下资料，发现html中引入调用另一个html的方法有很多种，我都尝试了一下，就把他们都列出来吧：
其中推荐第一种和第六种，因为代码太长就写在最后了。其他的方法，可以自己尝试，看是不是适合你当前项目。
一、需要借助 jquery div+$("#page1").load("b.html") 。
参考代码：
<body>
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").load("page/Page_1.html");
$("#page2").load("page/Page_2.html");
</script>
</body>
二、iframe 会生成一个边框，需要重新设置一下样式，相当于在页面内嵌入了一个页面。
参考代码：
<head> </head> <body> <div id="page1"> <iframe align="center" width="100%" height="170" src="page/Page_1.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div> <div id="page2"> <iframe align="center" width="100%" height="170" src="page/Page_2.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div> </body>
三、object引入 同样会生成一个边框，需要重新设置一下样式。
参考代码：
<head> <object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150> </object> </head>
四、import引入 这个我并没有试验成功，可能是我打开方式不对。
参考代码：
<head> <link rel="import" href="page/Page_1.html" id="page1"> </head> <body> <script> console.log(page1.import.body.innerHTML); </script> </body>
参考文章：https://www.web-tinker.com/article/20637.html
五、bootstrap的panel组件，或者easyui的window组件，有点类似这个效果；
六、通过一个 include.js 控制引入文件。
1、将下方js文件代码保存成 include.js 文件引入；
2、在页面中通过 <include src=""><include> 载入模板文件。
参考代码：
<include src="templates/header.html"></include>
js文件代码：
(function(window, document, undefined) {
var Include39485748323 = function() {}
Include39485748323.prototype = {
//倒序循环
forEach: function(array, callback) {
var size = array.length;
for(var i = size - 1; i >= 0; i--){
callback.apply(array[i], [i]);
}
},
getFilePath: function() {
var curWwwPath=window.document.location.href;
var pathName=window.document.location.pathname;
var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));
var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);
return localhostPaht+projectName;
},
//获取文件内容
getFileContent: function(url) {
var ie = navigator.userAgent.indexOf('MSIE') > 0;
var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
o.open('get', url, false);
o.send(null);
return o.responseText;
},
parseNode: function(content) {
var objE = document.createElement("div");
objE.innerHTML = content;
return objE.childNodes;
},
executeScript: function(content) {
var mac = /<script>([/s/S]*?)<//script>/g;
var r = "";
while(r = mac.exec(content)) {
eval(r[1]);
}
},
getHtml: function(content) {
var mac = /<script>([/s/S]*?)<//script>/g;
content.replace(mac, "");
return content;
},
getPrevCount: function(src) {
var mac = //././//g;
var count = 0;
while(mac.exec(src)) {
count++;
}
return count;
},
getRequestUrl: function(filePath, src) {
if(/http://///g.test(src)){ return src; }
var prevCount = this.getPrevCount(src);
while(prevCount--) {
filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1);
}
return filePath + "/"+src.replace(//././//g, "");
},
replaceIncludeElements: function() {
var $this = this;
var filePath = $this.getFilePath();
var includeTals = document.getElementsByTagName("include");
this.forEach(includeTals, function() {
//拿到路径
var src = this.getAttribute("src");
//拿到文件内容
var content = $this.getFileContent($this.getRequestUrl(filePath, src));
//将文本转换成节点
var parent = this.parentNode;
var includeNodes = $this.parseNode($this.getHtml(content));
var size = includeNodes.length;
for(var i = 0; i < size; i++) {
parent.insertBefore(includeNodes[0], this);
}
//执行文本中的额javascript
$this.executeScript(content);
parent.removeChild(this);
//替换元素 this.parentNode.replaceChild(includeNodes[1], this);
})
}
}
window.onload = function() {
new Include39485748323().replaceIncludeElements();
}
})(window, document)
参考：
未经允许不得转载：w3h5 » html中引入调用另一个公用html模板文件的方法
原创文章，作者：6024010，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/228411.html