html引入公共资源文件,HTML公共文件引入

文件,HTML公共文件引入"/>

html引入公共资源文件,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

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