html中引入调用另一个html文件的方法

本文链接：https://blog.csdn.net/weixin_43952253/article/details/109474389

本文介绍了在HTML中引入和调用其他HTML文件的四种方法：使用iframe、借助jQuery、通过object标签以及一个控制引入文件的JS方法。详细讲解了每种方法的实现及注意事项，适用于网页模板复用和维护。

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

最近写网页的时候，发现很多页面都是用的同一个header头部、aside侧边栏和footer页脚，那么为什么不把这些写成一个模板文件，在页面中直接引入呢？这样还方便后期的修改维护。但是html又不像php，jsp，asp等动态页面能够直接用小脚本引入模板html，查阅资料，下面整理了一些能实现嵌入页面需求的方法。

1. iframe引入

说到html中嵌入页面，首先想到的肯定是iframe，但是原生的iframe会生成一个边框，需要自己调一下样式。

<iframe width="800" height="500" src="http://www.baidu.com"></iframe>

在这里插入图片描述

<iframe width="800" height="500" frameborder="no" border="0" marginwidth="0" marginheight="0" src="http://www.baidu.com" scrolling="no"></iframe>

加上样式后的iframe：
在这里插入图片描述

2. 借助jquery引入

div+$("#page1").load(“b.html”)

参考代码：

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <script>
          $("#page1").load("page/Page_1.html");
          $("#page2").load("page/Page_2.html");
    </script>
</body>

3. object引入

 <object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150></object>

注意！：
经测试，此方法写的html在没有部署到服务器上时，在Firefox上显示不出来！
在Edge和Chrome上有效。

4. 通过一个`include.js`控制引入文件

新找到的方法，亲测有效，但不推荐，实用性有待测试

将下方js文件代码保存成include.js文件引入

  (function(window, document, undefined) {
    var MInclude = function() {}
    MInclude.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 MInclude().replaceIncludeElements();
    }
  })(window, document)