本博主最近正在建設一個9元包郵的網站，希望各位光臨指導一些意見： 9元包郵 http://www.jiubaou.com/
這個在做網頁中常要用到，有些通用的內容可集中放在一個頁面文件中，其它要用到這些內容的頁面只需要包含（引用）這個通用文件即可。這樣便於維護，如果有很多網頁，當通用內容需要修改時，只改一個文件就可以了，不需要每個文件單獨修改。
最典型的應用比如頁腳的版權信息等內容可以放在一個叫做footer.html文件裏， 然後其他頁面文件在頁面內容的最後包含這個文件就可以了，具體例子下面有。
要html文件嵌套，最簡單的辦法是使用SSI（Server Side Include)技術，也就是在服務器端兩個文件就被合併了。除了少數免費網頁寄存服務外，幾乎所有的網頁寄存服務器都支持 SSI。這也是一個比較推薦的方法，它與ASP和ASP.NET網頁使用的語法一模一樣。如果網站管理員偏向使用PHP或JSP的話，語法會稍有不同。
對於不能使用SSI、ASP、ASP.NET、PHP和JSP等服務器端動態頁面語言的情況，這裏還將介紹兩種客戶端鑲嵌的辦法：JavaScript和iframe的方法。當這兩種客戶端的方法都有很大的弊病，一般不推薦使用。
下面對各種方法單獨具體介紹。
1、SSI (Server Side Include)
SSI是一種簡單的動態網頁製作技術，但是有些服務器要求網頁文件擴展名爲.shtml才能識別文件中SSI命令。所以如果你的SSI命令看起來不工作，先別放棄，試着把文件擴展名改爲.shtml，也許會成功。如果知道自己的服務器是否支持SSI，請看另一篇文章。
使用SSI一個侷限性是頁面一定要放在網頁服務器上才能看到效果，在本地是不好調試的。當然，如果非要在本地調試，就本地裝一個Apache服務器好了。
比如你想在每個網頁的底部加上同樣的版權信息，像
© 2009 程序員實驗室 版權所有
可以把這行信息放到一個叫做footer.html的文件裏，footer.html的內容爲：
<center> © 程序員實驗室 版權所有</center>;
這樣同一路徑下的其他頁面文件要包含footer.html的SSI命令是：
<!–#include virtual=”footer.html” –> （常用）
或者
<!–#include file=”footer.html” –>
這兩者的幾乎是一樣的，不同之處在於include virtual後面取的是一個URL形式的路徑，甚至還可以執行一個CGI程序幷包含其輸出結果，如果你的服務器支持CGI的話。而include file後面取的是一個文件系統路徑，並且不能執行CGI程序。兩者都可以接受相對路徑，所以對上面這個簡單例子，兩者的效果是一樣的。如果你不知道 URL路徑與文件系統路徑兩者的區別的話，就用include virtual
更多關於SSI的介紹，請看這篇SSI的介紹文章。
2、PHP
如果你的服務器支持PHP的話，用PHP引用footer.html文件的寫法如下：
<?php include(”footer.html”); ?>
這句命令所在的文件擴展名必須被爲.php。
除了引用本服務器上的文件，PHP的include命令還可以用來引用其它網站上的html文件，比如：
<?php include(”http://www.prglab.com/examples/footer.html”); ?>
當然你要得到其它網站的允許才能引用別人的文件。
3、ASP和ASP.NET
如果你使用的是老式的ASP，則語法是與上面SSI一樣的，不需要任何修改，只要把命令所在文件的擴展名改爲.asp即可。
對於ASP.NET，也是類似，不同之處在於，因爲SSI命令是在ASP命令運行之前被首先編譯，所以文件名中不能夠使用ASP.NET的變量。如果一定要用的話，就用ASP.NET的命令來做文件嵌套吧。
比如：
<%
Response.WriteFile ("footer.html")
%>
更多關於怎樣在ASP.NET中實現動態文件嵌套，請參考微軟的這篇文章。
4、JSP （Java Server Page)
JSP文件需要在基於Java的服務器上運行，比如Apache Tomcat。JSP包含文件的語法是：
<%@ include file=”footer.html”%>
5、客戶端包含
5。1 客戶端包含的利弊
客戶端包含有兩種方式：Ｊａｖａｓｃｒｉｐｔ和iframe。讓我們先看看兩種方法各有什麼利弊。
兩種方法中Javascript生成的頁面格式比較好，Javascript可以從一個URL取到頁面片斷然後鑲嵌在另一個頁面的任何位置 。其結果與服務器端包含的結果基本上一樣，但弊端是客戶端必須開啓Javascript功能（目前大多數人是選擇開啓的，但也有少數出於安全方面的考慮不 開啓）。另一個弊端是搜索引擎是看不到由Javascript包含的頁面的內容的，這對你的網站推廣比較不利。
使用iframe比較簡單，它可以強制一個HTML頁面鑲嵌在另一個頁面中，類似於是用 object控件將Flash電影、錄像、或者MP3播放器嵌入一個頁面中。使用iframe，用戶端不需要開啓Javascript功能。但不利的方面 是iframe有固定的高度和寬度，不能隨着被嵌入頁面的大小而改變。當被嵌入頁面大於給定高寬度時，會顯示滾動條(當然你也可以使用 scrolling = “no” 來強制滾動條不顯示，但這樣頁面內容會顯示不完整)，影響頁面美觀。另外就是搜索引擎可能不收錄iframe引用的頁面，不利網站推廣。
5。2 使用JavaScript的客戶端包含
這個方法主要適用於Firefox瀏覽器(任何操作系統)、IE5以上(Windows)、蘋果的Safari瀏覽器(MacOS X），可以使用一項叫做XMLHTTP 的API技術來通過Javascript程序讀取一個動態讀取一個XML文件。這種方法也可以用來讀取一個HTML文件，並放到當前網頁文件的指定位置。
專業網站設計者：不要用這個！ 也許在某些情況下你不得不用JavaScript來實現網頁嵌套，但是這只是一種轉彎抹角的替代方法。當你的服務器可以支持前面講的服務器端嵌套方法時， 尤其是專業人士，應儘可能避免使用這種方法，因爲你的客戶可能會投訴你做的網頁內容無法被Google搜索到，或不能在某些瀏覽器中正常顯示。
記住這種方法做的網頁只能在Firefox，Safari,和IE5以上版本的瀏覽器中正常顯示。大部分人都是用這幾種瀏覽器的，但是不是所有人，而且有些用戶因爲安全因素考慮會關閉Javascript功能。
重要提示：如果你是在本地電腦上調試網頁而不是在服務器上瀏覽，最新版本的ＩＥ瀏覽器會自動屏蔽 Ｊａｖａｓｃｒｉｐｔ動態生成的部分，並顯示警告信息，你必須選擇”允許顯示動態內容”網頁才能正常顯示。當你把這些網頁文件放到服務器上去的時候這個問 題就會自動消失的，因爲IE會辨別出主頁和被包含的網頁內容都來自同一個服務器。
好了，說了夠多了，下面是具體怎麼做。把以下代碼放在網頁的<head>裏面：
<script>
function clientSideInclude(id, url) {
var req = false;
// Safari, Firefox, 及其他非微軟瀏覽器
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject) {
// For Internet Explorer on Windows
try {
req = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
req = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e) {
req = false;
}
}
}
var element = document.getElementById(id);
if (!element) {
alert(”函數clientSideInclude無法找到id ” + id + “。” +
“你的網頁中必須有一個含有這個id的div 或 span 標籤。”);
return;
}
if (req) {
// 同步請求，等待收到全部內容
req.open(’GET’, url, false);
req.send(null);
element.innerHTML = req.responseText;
} else {
element.innerHTML =
“對不起，你的瀏覽器不支持 ” +
“XMLHTTPRequest 對象。這個網頁的顯示要求 ” +
“Internet Explorer 5 以上版本, ” +
“或 Firefox 或 Safari 瀏覽器，也可能會有其他可兼容的瀏覽器存在。”;
}
}
</script>
有了這段代碼我們就可以在網頁的任何位置插入另一個頁面了。首先我們要生成一個作爲”容器”的HTML控件，比如<span>，並給這個”容 器”控件一個ID，比如includefooter，然後把這個ID和要包含的頁面的URL地址傳遞給前面寫的這個js函數 clientSideInclude就可以了。
一個需要注意的地方是函數clientSideInclude只有在頁面被完全加載後才能工作，所以我們需要在<body>標籤的 onload事件上來調用這個函數，這是最保險的調用時機，因爲這個事件觸發的時候瀏覽器肯定已經完全解析了頁面中所有HTML了。
所以，具體代碼是：
在需要插入另一頁面的地方寫：
<span id=”includefooter”> </span>
在頁面開始處標籤裏寫：
<body onLoad=”clientSideInclude(’includefooter’, ‘footer.html’);>
當然，你也可以把函數clientSideInclude放在一個單獨的文件裏面，比如命名爲clientSideInclude.js，然後在你的頁面<head>標籤中插入下面這<script>標籤以便可以調用這個函數：
<script src=”clientSideInclude.js” language=”JavaScript”> </script>
5。3 使用iframe的客戶端包含
客戶端頁面嵌套還可以使用iframe的方法，弊端是必須事先想好被嵌套的頁面在首頁中要佔多大的位置。如果被嵌套頁面太大，超過事先定義的寬度或高度，則首頁會出現滾動條。這也許正是你所需要的，但也許會完全破壞主頁的設計。
iframe的使用很簡單，下面的例子會在你的頁面中嵌入另一個叫做include.html的頁面：
<iframe src=”included.html” width=”450″ height=”400″>
<a href=”included.html”>你的瀏覽器不支持iframe頁面嵌套，請點擊這裏訪問頁面內容。</a>
</iframe>
這裏主頁中定義了要插入的頁面將顯示的高度爲400的像素，寬度爲450個像素。
我們爲什麼要在 iframe的裏面插入一個普通的超級鏈接元素<a>呢？這是因爲老版本的瀏覽器和搜索引擎不支持iframe，雖然現在已經很少有人還會使 用Netscape 4這樣老的瀏覽器了，但是幾乎所有人都會使用象Google這樣的搜索引擎。在iframe裏面加上超級鏈接可以幫助搜索引擎找到網頁的內容。
另外我們可以定義iframe的一些屬性來控制網頁的顯示效果 ，除了前面用到的最常用寬度(width)和高度(height)的定義外，如果在任何情況下都不希望出現滾動條的話，可以定義iframe的 scrolling屬性等於“no”。如果不希望鑲嵌頁面的周圍出現邊框的話，可以將frameborder屬性設置爲0。下面這個例子顯示了 scrolling和frameborder屬性的使用：
<iframe src=”included.html” width=”450″ height=”400″ frameborder=”0″ scrolling=”no”>
<a href=”included.html”>你的瀏覽器不支持iframe頁面嵌套，請點擊這裏訪問頁面內容。</a>
</iframe>
