html运⽤（⼀）如何将⼀个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的介绍，请看。
2、PHP
如果你的服务器⽀持PHP的话，⽤PHP引⽤footer.html⽂件的写法如下：
<?php include("footer.html"); ?>
这句命令所在的⽂件扩展名必须被为.php。
除了引⽤本服务器上的⽂件，PHP的include命令还可以⽤来引⽤其它⽹站上的html⽂件，⽐如：
<?php include(www.prglab/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的服务器上运⾏，⽐如。JSP包含⽂件的语法是：用html设计一个疫情网页代码
<%@ 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），可以使⽤⼀项叫做的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 = ElementById(id);
if (!element) {
alert("函数clientSideInclude⽆法到id " + id + "。" +
"你的⽹页中必须有⼀个含有这个id的div 或 span 标签。");
return;
}
if (req) {
// 同步请求，等待收到全部内容
req.open(’GET’, url, false);
req.send(null);
element.innerHTML = sponseText;
} else {
element.innerHTML =
"对不起，你的浏览器不⽀持" +
"XMLHTTPRequest 对象。这个⽹页的显⽰要求" +
"Internet Explorer 5 以上版本, " +
"或 Firefox 或 Safari 浏览器，也可能会有其他可兼容的浏览器存在。";
}
}
</script>
有了这段代码我们就可以在⽹页的任何位置插⼊另⼀个页⾯了。⾸先我们要⽣成⼀个作为”容器”的HT
ML控件，⽐如<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。