引入公共html页面的几种方法

  开发过程中会遇到这样的问题，一个网站的头部尾部固定，几乎出现在每个页面之中，也或许其中的某些模块反复使用，这时为了做到一次编写，多处使用的功效，我们就会想要去将这部分的代码放在单独的文件中，然后引用这个文件。引用文件在php、asp.net文件中include进去就可以了，那么如果是在html静态文件中有没有什么办法呢？

        经过多番查找，发现方法还是挺多的，下面就来一一列举一下：

PHP/ASP.NET——include

1. <strong>include 'test.html';  
2. require 'test.html';</strong>  

1. <strong><!--#include file='filename'--></strong>  

iFrame:

        这个自是不用多说的，最简单的方式了：

1. <iframe src="http://baidu.com/" width=""; height="" frameborder="0" scrolling="no" ></iframe>  

        iFrame的方式缺点在于页面结构的杂乱、不易被搜索引擎搜索、导航链接等等问题，因此，大家普遍寻找其他的替代方法。

Javascript/jQuery:

        首先想到的自然是js来处理了，利用js(jQuery)或ajax从服务器上取回需要的公共页面然后插入页面。

1. $("#myDiv").load(“url”,params)  

1. var test={  
2.     "type1":"paramer1","type2":"paramer2"};  
3.     $.ajax({  
4.         url:'myTest.php',  
5.         type:'post',  
6.     dataType:'html',  
7.     data:parames,  
8.     error: function(){alert('error');},  
9.     success:function(data){  
10.         $("#myDiv").html(data);  
11.     }  
12. });  

SSI:

SSI（Server SideInc lude)，通常称为 服务器端嵌入 ，是一种类似于 ASP 的基于服务器的网页制作技术。 html页面的命令，需由服务器在提供页面的时候进行处理,该方法需要有服务器的支持才能使用。

配置方式如下：

1、打开apache安装目录，找到 httpd.conf文件，用编辑器打开，找到如下两行，将前面的#号去掉。

1. #AddType text/html .shtml  
2. #AddOutPutFilter INCLUDES .shtml  

2、找到" Options Indexes FollowSymLinks"，在后面加上Includes

1. Options Indexes FollowSymLinks Includes  

如上即配置好了。使用格式如下：

1. <!--#include  "test.html"-->  

Clam:

Clam开发出来的功能之一就是 构建 模块化的 前端 项目，其余的功能更是强大，暂且不提，详见： https://www.npmjs.org/package/clam。

Clam的使用首先需要安装nodejs，然后使用npm安装：

1. npm -g install clam  

安装好之后，创建项目什么的见上述链接，都有详细说明，这里只提一下如何使用它来引入页面：

在需要引入其他页面的地方，仅仅加一句：

1. <!--#include  "test.html"-->  

格式和asp、SSI方式一样。这种方式的好处之一是不用再去配置，且使用的是http服务器，不用为了使用公共部分代码而不得不用php等等技术。