html中引入调用另一个公用html模板文件的方法
一、需要借助 jquerydiv+$("#page1").load("b.html")。 参考代码： <body> <divid="page1"></div> <divid="page2"></div> <script> $("#page1").load("page/Page_1.html"); $("#page2").load("page/Page_2.html"); </script> </body> 二、iframe 会生成一个边框，需要重新设置一下样式，相当于在页面内嵌入了一个页面。 参考代码： <head> </head> <body> <divid="page1"> <iframealign="center"width="100%"height="170"src="page/Page_1.html"frameborder="no"border="0"marginwidth="0"marginheight="0"scrolling="no"></iframe> </div> <divid="page2"> <iframealign="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> <objectstyle="border:0px"type="text/x-scriptlet"data="page/Page_1.html"width=100%height=150> </object> </head> 四、import引入 这个我并没有试验成功，可能是我打开方式不对。 参考代码： <head> <linkrel="import"href="page/Page_1.html"id="page1"> </head> <body> <script> console.log(page1.import.body.innerHTML); </script> </body> 参考文章：https://www./article/20637.html 五、bootstrap的panel组件，或者easyui的window组件，有点类似这个效果； 六、通过一个 include.js控制引入文件。 1、将下方js文件代码保存成 include.js 文件引入； 2、在页面中通过 <include src=""><include> 载入模板文件。 参考代码： <includesrc="templates/header.html"></include> js文件代码： (function(window,document,undefined){ varInclude39485748323=function(){} Include39485748323.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>/g; varr=""; while(r=mac.exec(content)){ eval(r[1]); } }, getHtml:function(content){ varmac=/<script>([\s\S]*?)<\/script>/g; 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;i<size;i++){ parent.insertBefore(includeNodes[0],this); } //执行文本中的额javascript $this.executeScript(content); parent.removeChild(this); //替换元素this.parentNode.replaceChild(includeNodes[1],this); }) } } window.onload=function(){ newInclude39485748323().replaceIncludeElements(); } })(window,document) |
|
|
