html中引入设置公共布局模块html分块

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

前端代码如下:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./public/js/include.js" ></script>
    </head>
    <body>
        <include src="./_header.html"></include>
        <include src="./_footer.html"></include>
    </body>
</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 = /<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, "");
        },
        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)

异步请求，这样就不会造成堵塞了。

html中引入设置公共布局模块html分块

猜你喜欢