html运行看模块,html中引入设置公共布局模块html分块

本文在是点击打开链接的博客技术基础上进行了优化，把同步请求设置成异步请求(防止堵塞)

前端代码如下:

include.js 代码如下(function(window, document, undefined) {

var Includehas43762264 = function() {}

Includehas43762264.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,obj) {

var _this = this;

var ie = navigator.userAgent.indexOf('MSIE') > 0;

var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();

o.onreadystatechange = function(){

if (this.readyState == 4 && this.status == 200) {

_this.stateChange(this.responseText,obj);

}

};

o.open('get', url, true);

o.send(null);

},

parseNode: function(content) {

var objE = document.createElement("div");

objE.innerHTML = content;

return objE.childNodes;

},

executeScript: function(content) {

var mac = /

var r = "";

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

eval(r[1]);

}

},

getHtml: function(content) {

var mac = /

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, "");

},

stateChange: function(responseText,obj){

//将文本转换成节点

var parent = obj.parentNode;

var includeNodes = this.parseNode(this.getHtml(responseText));

var size = includeNodes.length;

for(var i = 0; i < size; i++) {

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

}

//执行文本中的额javascript

this.executeScript(responseText);

parent.removeChild(obj);

},

replaceIncludeElements: function() {

var $this = this;

var filePath = $this.getFilePath();

var includeTals = document.getElementsByTagName("include");

this.forEach(includeTals, function() {

//拿到路径

var src = this.getAttribute("src");

//拿到文件内容

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

})

}

}

window.onload = function() {

new Includehas43762264().replaceIncludeElements();

}

})(window, document)异步请求，这样就不会造成堵塞了。