html页面引入另一个html页面

我们在使用代码编程一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。

在这里，有好几种引入html文件的方式，不过每种都是有利有弊，需要根据需要自行选择

有大佬反馈解决了有些浏览器本地实现不了的问题：放到服务器上面！（感谢！！！）

---

注意：引入后主页面的Css样式不适用于被引入页面，比如在主页面设置

只在本页面生效，引入文件整体适用，但引入文件内容不适用。

---

• import引入(中引入文件， 你好呀！

  最后的运行效果：
  

  

  import引入运行效果

  
  为了客观反应不同方式的引入差距，下面是浏览器代码界面：
  

  

  控制台检查

  
  由上图可以看出， import引入除开script标签，在其他html body中写入什么就引入什么，完全的内容格式.

  ---

  • js引入

  
          
          
  
          
  
              
  你好，我在中间！
          
          
  
          
          
          
  

  使用js引入，相当于把引入的html中head和body标签中的数据拖出来，在外面包了一个你自己写的标签，比如说上面代码中的

  运行结果同import相同，这里不再展示

  注意：是head和body标签中的数据，不带标签，下图是浏览器显示代码

  

  js引入

  ---

  • include 引入(涉及到一个从网上扒的封装函数,下面有)（head和body标签中的数据直接引入）

  
          
          
          
          
          
  
              
  你没有看错，我在这！
          
          
      
  

  浏览器代码分析
  

  

  include引入

  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-=1){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=/