如何將一個HTML頁面巢狀在另一個頁面中
2010-05-05 16:45 559人閱讀 評論(1) 收藏 舉報
這個在做網頁中常要用到，有些通用的內容可集中放在一個頁面檔案中，其它要用到這些內容的頁面只需要包含（引用）這個通用檔案即可。這樣便於維護，如果有很多網頁，當通用內容需要修改時，只改一個檔案就可以了，不需要每個檔案單獨修改。
最典型的應用比如頁尾的版權資訊等內容可以放在一個叫做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 客戶端包含的利弊
客戶端包含有兩種方式：JavaScript和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功能。
重要提示：如果你是在本地電腦上除錯網頁而不是在伺服器上瀏覽，最新版本的ＩＥ瀏覽器會自動遮蔽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>
轉自：http://blog.csdn.net/quyuanjingfu/article/details/5560121