html页面引入另一html

最新推荐文章于 2025-03-03 08:01:44 发布

高欣的博客

最新推荐文章于 2025-03-03 08:01:44 发布

阅读量1.4w

点赞数

分类专栏： javaweb

本文链接：https://blog.youkuaiyun.com/gaoxin_gx/article/details/93713314

版权

javaweb 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的页面模块化加载方法，通过编写include.js脚本，可以实现在主页面中按需加载头部等公共模块，提高了网页的加载效率和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以引入头页面为例：
头页面：top.html
主页面：index.html
top.html中该怎么写就怎么写，head与body中改写什么还是什么。
index.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)

（路径的问题，自己注意点）
在主页中，在head中加入：