前端菜鳥 2019-09-27 13:33:20
一、需要借助 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 會生成一個邊框，需要重新設置一下樣式，相當于在頁面內(nèi)嵌入了一個頁面。
參考代碼：
<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.web-tinker.com/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={ //倒序循環(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é)點 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)
聯(lián)系客服
