如何将一个HTML页面嵌套在另一个页面中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将一个HTML页面嵌套在另一个页面中相关的知识，希望对你有一定的参考价值。
这个在做网页中常要用到，有些通用的内容可集中放在一个页面文件中，其它要用到这些内容的页面只需要包含（引用）这个通用文件即可。这样便于维护，如果有很多网页，当通用内容需要修改时，只改一个文件就可以了，不需要每个文件单独修改。最典型的应用比如页脚的版权信息等内容可以放在一个叫做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功能。
重要提示：如果你是在本地电脑上调试网页而不是在服务器上浏览，最新版本的IE浏览器会自动屏蔽
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" >
<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" frameborder="0" scrolling="no">
<a href="included.html">你的浏览器不支持iframe页面嵌套，请点击这里访问页面内容。</a>
</iframe> 参考技术A
这个在做网页中常要用到，有些通用的内容可集中放在一个页面文件中，其它要用到这些内容的页面只需要包含（引用）这个通用文件即可。这样便于维护，如果有很多网页，当通用内容需要修改时，只改一个文件就可以了，不需要每个文件单独修改。
拓展：
1、超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
2、在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Web）。Web页面也就是通常所说的网页，在这里不作区分。
OS X Server Wiki - 如何让 wiki 页面的内容显示在另一个 wiki 页面上
【中文标题】OS X Server Wiki - 如何让 wiki 页面的内容显示在另一个 wiki 页面上【英文标题】：OS X Server Wiki - How can I get the content of a wiki page to display on another wiki page 【发布时间】：2014-05-19 12:08:21 【问题描述】：在几乎任何 wiki 服务器中，您都可以创建指向 wiki 上另一个页面的超链接。如何创建一个将其他页面的内容拉入我的页面的窗口？
我可以添加带有 iframe 的 HTML 片段，但它会拉取整个页面而不仅仅是内容？
页面后面的javascript代码没有混淆，但似乎使用Prototype，我不明白？
有人有这方面的经验吗？！
【问题讨论】：
【参考方案1】：这不能可靠地完成，可以创建 iframe 并将其指向的域列入白名单，但它只是将整个页面拉到一个小窗口中。完全无法使用。
我一直在寻找的东西被称为“包含”或“嵌入”，而 OS X Server 不具备 MediaWiki 中显然是标准的功能，并且多年来一直如此。
更多信息在这里： Wikis - Is there a wiki in which one can create, within a page, "windows" (partial frames) to other pages?
【讨论】：
以上是关于如何将一个HTML页面嵌套在另一个页面中的主要内容，如果未能解决你的问题，请参考以下文章