如何將一個HTML頁面嵌套在另外一個頁面中

時間 2019-11-08

標籤如何一個 html 頁面嵌套另外欄目 HTML 简体版

原文原文鏈接

這個在作網頁中常要用到，有些通用的內容可集中放在一個頁面文件中，其它要用到這些內容的頁面只須要包含（引用）這個通用文件便可。這樣便於維護，若是有不少網頁，當通用內容須要修改時，只改一個文件就能夠了，不須要每一個文件單獨修改。php

最典型的應用好比頁腳的版權信息等內容能夠放在一個叫作footer.html文件裏，而後其餘頁面文件在頁面內容的最後包含這個文件就能夠了，具體例子下面有。html

要 html文件嵌套，最簡單的辦法是使用SSI（Server Side Include)技術，也就是在服務器端兩個文件就被合併了。除了少數免費網頁寄存服務外，幾乎全部的網頁寄存服務器都支持 SSI。這也是一個比較推薦的方法，它與ASP和ASP.NET網頁使用的語法如出一轍。若是網站管理員偏向使用PHP或JSP的話，語法會稍有不一樣。程序員

對於不能使用SSI、ASP、ASP.NET、PHP和JSP等服務器端動態頁面語言的狀況，這裏還將介紹兩種客戶端鑲嵌的辦法：JavaScript和iframe的方法。當這兩種客戶端的方法都有很大的弊病，通常不推薦使用。apache

下面對各類方法單獨具體介紹。瀏覽器

一、SSI (Server Side Include) tomcat

SSI是一種簡單的動態網頁製做技術，可是有些服務器要求網頁文件擴展名爲.shtml才能識別文件中SSI命令。因此若是你的SSI命令看起來不工做，先別放棄，試着把文件擴展名改成.shtml，也許會成功。若是知道本身的服務器是否支持SSI，請看另外一篇文章。安全

使用SSI一個侷限性是頁面必定要放在網頁服務器上才能看到效果，在本地是很差調試的。固然，若是非要在本地調試，就本地裝一個Apache服務器好了。服務器

好比你想在每一個網頁的底部加上一樣的版權信息，像ide

© 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的介紹文章。

二、PHP

若是你的服務器支持PHP的話，用PHP引用footer.html文件的寫法以下：

<?php include("footer.html"); ?>

這句命令所在的文件擴展名必須被爲.php。

除了引用本服務器上的文件，PHP的include命令還能夠用來引用其它網站上的html文件，好比：

<?php include(http://www.prglab.com/examples/footer.html); ?>

固然你要獲得其它網站的容許才能引用別人的文件。

三、ASP和ASP.NET

若是你使用的是老式的ASP，則語法是與上面SSI同樣的，不須要任何修改，只要把命令所在文件的擴展名改成.asp便可。

對於ASP.NET，也是相似，不一樣之處在於，由於SSI命令是在ASP命令運行以前被首先編譯，因此文件名中不可以使用ASP.NET的變量。若是必定要用的話，就用ASP.NET的命令來作文件嵌套吧。

好比：

<%

          Response.WriteFile ("footer.html")

%>

更多關於怎樣在ASP.NET中實現動態文件嵌套，請參考微軟的這篇文章。

四、JSP （Java Server Page)

JSP文件須要在基於Java的服務器上運行，好比Apache Tomcat。JSP包含文件的語法是：

<%@ include file="footer.html" %>

五、客戶端包含

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>裏面：

// 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的頁面：

<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屬性的使用：

<a href="included.html">你的瀏覽器不支持iframe頁面嵌套，請點擊這裏訪問頁面內容。</a>

</iframe>