網頁公共部分引入的幾種方法簡述



         開發過程中會遇到這樣的問題，一個網站的頭部尾部固定，幾乎出現在每個頁面之中，也或許其中的某些模塊反復使用，這時為了做到一次編寫，多處使用的功效，我們就會想要去將這部分的代碼放在單獨的文件中，然后引用這個文件。引用文件在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等等技術。