HTML公共文件引入

在编写网页有多个页面时经常会用到很多公共的部分，如页面的头部导航、尾部信息等，如果每个页面都写一次太过繁琐造成代码的冗余且不便于维护，所以将公共数据封装化，继承引入才是王道。文件的引入在不同的环境下有不同的方式，如PHP环境下，可以通过设置，直接@include('public.header')就行，纯HTML可以iframe或者是其他方式，在一次页面中，我是通过ajax方式引入的，例如：
1.在主文件中设置div及id或class:

2.新建一个用于编写头部导航文件header.html

  
    
  
  

    

      产品定位
      产品功能
      产品特征
    
    

      注册
    
  

3.创建数据渲染的js，public.js

navigation();
//显示菜单栏
function navigation(){
    $.ajax({
        type:"GET",
        dataType:'html',
        url:'/header.html',
        success:function( result ){
            $('#navigation').html(result);
        },
        error:function(e) {
          console.log('数据错误');
        }
    })
}

4.在需要用的header.html文件内容的页面中引入public.js

通过文件分离方式，可以提高代码的管理，以后若有需要改变的，直接改一个地方就好。