html中引入調(diào)用另一個(gè)公用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 會(huì)生成一個(gè)邊框，需要重新設(shè)置一下樣式，相當(dāng)于在頁(yè)面內(nèi)嵌入了一個(gè)頁(yè)面。 參考代碼： <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引入 同樣會(huì)生成一個(gè)邊框，需要重新設(shè)置一下樣式。 參考代碼： <head> <objectstyle="border:0px"type="text/x-scriptlet"data="page/Page_1.html"width=100%height=150> </object> </head> 四、import引入 這個(gè)我并沒(méi)有試驗(yàn)成功，可能是我打開(kāi)方式不對(duì)。 參考代碼： <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組件，有點(diǎn)類(lèi)似這個(gè)效果； 六、通過(guò)一個(gè) include.js控制引入文件。 1、將下方j(luò)s文件代碼保存成 include.js 文件引入； 2、在頁(yè)面中通過(guò) <include src=""><include> 載入模板文件。 參考代碼： <includesrc="templates/header.html"></include> js文件代碼： (function(window,document,undefined){ varInclude39485748323=function(){} Include39485748323.prototype={ //倒序循環(huán) 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; }, //獲取文件內(nèi)容 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"); //拿到文件內(nèi)容 varcontent=$this.getFileContent($this.getRequestUrl(filePath,src)); //將文本轉(zhuǎn)換成節(jié)點(diǎn) varparent=this.parentNode; varincludeNodes=$this.parseNode($this.getHtml(content)); varsize=includeNodes.length; for(vari=0;i<size;i++){ parent.insertBefore(includeNodes[0],this); } //執(zhí)行文本中的額javascript $this.executeScript(content); parent.removeChild(this); //替換元素this.parentNode.replaceChild(includeNodes[1],this); }) } } window.onload=function(){ newInclude39485748323().replaceIncludeElements(); } })(window,document) |
|
|
來(lái)自： hncdman > 《html基礎(chǔ)》
