网页公共部分引入的几种方法简述



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

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

PHP/ASP.NET——include

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

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

iFrame:

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

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

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

Javascript/jQuery:

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

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

var test={
    "type1":"paramer1","type2":"paramer2"};
    $.ajax({
        url:'myTest.php',
        type:'post',
    dataType:'html',
    data:parames,
    error: function(){alert('error');},
    success:function(data){
        $("#myDiv").html(data);
    }
});

SSI:

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

配置方式如下：

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

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

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

Options Indexes FollowSymLinks Includes

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

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

Clam:

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

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

npm -g install clam

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

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

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

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