html静态页面引入公共html页面
2017-12-06 13:34
281 查看
不用模板引擎在普通静态html页面导入公共的html页面,比如header.html, footer.html, 可以这样做,自己写了一个include.js
(function(window, document, undefined) { var Include39485748323 = function() {} Include39485748323.prototype = { //倒序循环 forEach: function(array, callback) { var size = array.length; for(var i = size - 1; i >= 0; i--){ callback.apply(array[i], [i]); } }, getFilePath: function() { var curWwwPath=window.document.location.href; var pathName=window.document.location.pathname; var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName)); var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1); return localhostPaht+projectName; }, //获取文件内容 getFileContent: function(url) { var ie = navigator.userAgent.indexOf('MSIE') > 0; var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); o.open('get', url, false); o.send(null); return o.responseText; }, parseNode: function(content) { var objE = document.createElement("div"); objE.innerHTML = content; return objE.childNodes; }, executeScript: function(content) { var mac = /<script>([\s\S]*?)<\/script>/g; var r = ""; while(r = mac.exec(content)) { eval(r[1]); } }, getHtml: function(content) { var mac = /<script>([\s\S]*?)<\/script>/g; content.replace(mac, ""); return content; }, getPrevCount: function(src) { var mac = /\.\.\//g; var count = 0; while(mac.exec(src)) { count++; } return count; }, getRequestUrl: function(filePath, src) { if(/http:\/\//g.test(src)){ return src; } var prevCount = this.getPrevCount(src); while(prevCount--) { filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1); } return filePath + "/"+src.replace(/\.\.\//g, ""); }, replaceIncludeElements: function() { var $this = this; var filePath = $this.getFilePath(); var includeTals = document.getElementsByTagName("include"); this.forEach(includeTals, function() { //拿到路径 var src = this.getAttribute("src"); //拿到文件内容 var content = $this.getFileContent($this.getRequestUrl(filePath, src)); //将文本转换成节点 var parent = this.parentNode; var includeNodes = $this.parseNode($this.getHtml(content)); var size = includeNodes.length; for(var i = 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() { new Include39485748323().replaceIncludeElements(); } })(window, document)
页面引入
相关文章推荐
- html静态页面引入公共html页面
- html页面引入公共静态页面
- HTML静态页面引入公共html文件(ssi服务器端指令详解)
- html静态页面引入公共html页面
- Nginx SSI 静态html页面 动态引入其它页面 实现页面区块化 设置
- 引入公共html页面的几种方法
- html页面引入公共部分,头部和尾部
- 在html页面中引入公共的头部和底部
- JSP/HTML页面 (公共JS、CSS、Image缓存)-----静态缓存
- 利用freemarker、java生成html静态页面
- 生成静态html页面(转)
- ASP.NET生成静态HTML页面并分别按年月目录存放
- ASP静态化后,静态html页面点击计数解决方法
- html间页面静态传值(根据url地址拆分字符串获取参数)
- html静态页面实现微信分享思路
- xml应用(1):使用xmldom在服务器端生成静态html页面
- jsp生成html静态页面
- iframe之间静态html页面如何传递参数?
- php生成静态html页面的方法(2种方法)
- js引入php 用来加载静态页面 输出到页面中