html引入公共资源文件,html中引入调用另一个公用html模板文件的方法

参考代码：

head

===

body

();

/body

参考文章：https://www.web-tinker.com/article/20637.html

五、bootstrap的panel组件，或者easyui的window组件，有点类似这个效果；

六、通过一个include.js控制引入文件。

1、将下方js文件代码保存成include.js文件引入；

2、在页面中通过includesrc=include载入模板文件。

参考代码：

includesrc=templates/header.html/include

js文件代码：

(function(window,document,undefined){

varInclude****=function(){}

Include****.prototype={

//倒序循环

forEach:function(array,callback){

varsize=array.length;

for(vari=size-1;i=0;i--){

callback.apply(array[i],[i]);

}

},

getFilePath:function(){

varcurWwwPath=window.document.location.href;

varpathName=window.document.location.pathname;

varlocalhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));

varprojectName=pathName.substring(0,pathName.substr(1).lastIndexOf(/)+1);

returnlocalhostPaht+projectName;

},

//获取文件内容

getFileContent:function(url){

varie=navigator.userAgent.indexOf(MSIE)0;

varo=ie?newActiveXObject(Microsoft.XMLHTTP):newXMLHttpRequest();

o.open(get,url,false);

o.send(null);

returno.responseText;

},

parseNode:function(content){

varobjE=document.createElement(div);

objE.innerHTML=content;

returnobjE.childNodes;

},

executeScript:function(content){

varmac=/script([\s\S]*?)\/script

varr=

while(r=mac.exec(content)){

eval(r[1]);

}

},

getHtml:function(content){

varmac=/script([\s\S]*?)\/script

content.replace(mac,);

returncontent;

},

getPrevCount:function(src){

varmac=/\.\.\//g;

varcount=0;

while(mac.exec(src)){

count++;

}

returncount;

},

getRequestUrl:function(filePath,src){

if(/http:\/\//g.test(src)){returnsrc;}

varprevCount=this.getPrevCount(src);

while(prevCount--){

filePath=filePath.substring(0,filePath.substr(1).lastIndexOf(/)+1);

}

returnfilePath+/+src.replace(/\.\.\//g,);

},

replaceIncludeElements:function(){

var$this=this;

varfilePath=$this.getFilePath();

varincludeTals=document.getElementsByTagName(include);

this.forEach(includeTals,function(){

//拿到路径

varsrc=this.getAttribute(src);

//拿到文件内容

varcontent=$this.getFileContent($this.getRequestUrl(filePath,src));

//将文本转换成节点

varparent=this.parentNode;

varincludeNodes=$this.parseNode($this.getHtml(content));

varsize=includeNodes.length;

for(vari=0;isize;i++){

parent.insertBefore(includeNodes[0],this);

}

//执行文本中的额javascript

$this.executeScript(content);

parent.removeChild(this);

//替换元素this.parentNode.replaceChild(includeNodes[1],this);

})

}

}

window.οnlοad=function(){

newInclude****().replaceIncludeElements();

}

})(window,document)

参考：

1、html中引入调用另一个html的方法

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