电商网站-多页面共享头部

作者: 牛奶大泡芙 | 来源:发表于2018-02-09 20:04 被阅读0次

在前端项目中，有时候会遇到多个页面使用相同的头部模块的情况，为了节省劳动力，我们可以采用引入js文件的方式。

但是我们一开始实现模块都是采用html渲染页面，如何统一插入页面呢。

1、书写完整的html页面文件并引入css文件

<!DOCTYPE html>
<html>
<head>
   <meta name='description' content="this is my page"> 
   <meta name="content-type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
   <header>
      <section class='hed'>   
      <!--这里是你设计的头部内容 -->
      </section>
   </header>
</body>
</html>

2、使用转换工具将html转换成js

推荐一个转换工具网站：http://tool.chinaz.com/Tools/Html_Js.aspx

实际上就是把每一句都‘document.writeln( )’一下

3、将js文件引入需要的jsp文件的相应位置