html静态页面引入公共html页面

很多人问有什么方法不用模板引擎在普通静态html页面导入公共的html页面,比如header.html, footer.html, 

include.js代码如下

[javascript]  view plain  copy

1. /** 
2.  * Created by 张永风 on 2016/1/13. 
3.  */  
4. (function(window, document, undefined) {  
5.     var Include39485748323 = function() {}  
6.     Include39485748323.prototype = {  
7.         //倒序循环  
8.         forEach: function(array, callback) {  
9.             var size = array.length;  
10.             for(var i = size - 1; i >= 0; i--){  
11.                 callback.apply(array[i], [i]);  
12.             }  
13.         },  
14.         getFilePath: function() {  
15.             var curWwwPath=window.document.location.href;  
16.             var pathName=window.document.location.pathname;  
17.             var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));  
18.             var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);  
19.             return localhostPaht+projectName;  
20.         },  
21.         //获取文件内容  
22.         getFileContent: function(url) {  
23.             var ie = navigator.userAgent.indexOf('MSIE') > 0;  
24.             var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();  
25.             o.open('get', url, false);  
26.             o.send(null);  
27.             return o.responseText;  
28.         },  
29.         parseNode: function(content) {  
30.             var objE = document.createElement("div");  
31.             objE.innerHTML = content;  
32.             return objE.childNodes;  
33.         },  
34.         executeScript: function(content) {  
35.             var mac = /<script>([\s\S]*?)<\/script>/g;  
36.             var r = "";  
37.             while(r = mac.exec(content)) {  
38.                 eval(r[1]);  
39.             }  
40.         },  
41.         getHtml: function(content) {  
42.             var mac = /<script>([\s\S]*?)<\/script>/g;  
43.             content.replace(mac, "");  
44.             return content;  
45.         },  
46.         getPrevCount: function(src) {  
47.             var mac = /\.\.\//g;  
48.             var count = 0;  
49.             while(mac.exec(src)) {  
50.                 count++;  
51.             }  
52.             return count;  
53.         },  
54.         getRequestUrl: function(filePath, src) {  
55.             if(/http:\/\//g.test(src)){ return src; }  
56.             var prevCount = this.getPrevCount(src);  
57.             while(prevCount--) {  
58.                 filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1);  
59.             }  
60.             return filePath + "/"+src.replace(/\.\.\//g, "");  
61.         },  
62.         replaceIncludeElements: function() {  
63.             var $this = this;  
64.             var filePath = $this.getFilePath();  
65.             var includeTals = document.getElementsByTagName("include");  
66.             this.forEach(includeTals, function() {  
67.                 //拿到路径  
68.                 var src = this.getAttribute("src");  
69.                 //拿到文件内容  
70.                 var content = $this.getFileContent($this.getRequestUrl(filePath, src));  
71.                 //将文本转换成节点  
72.                 var parent = this.parentNode;  
73.                 var includeNodes = $this.parseNode($this.getHtml(content));  
74.                 var size = includeNodes.length;  
75.                 for(var i = 0; i < size; i++) {  
76.                     parent.insertBefore(includeNodes[0], this);  
77.                 }  
78.                 //执行文本中的额javascript  
79.                 $this.executeScript(content);  
80.                 parent.removeChild(this);  
81.                 //替换元素 this.parentNode.replaceChild(includeNodes[1], this);  
82.             })  
83.         }  
84.     }  
85.     window.onload = function() {  
86.         new Include39485748323().replaceIncludeElements();  
87.     }  
88. })(window, document)  

这是主页,引入了三个页面,

运行效果,

当然引入页面你也可以这样写