2023年11月25日发(作者:)

html运⽤(⼀)如何将⼀个HTML页⾯嵌套在另⼀个页⾯中

这个在做⽹页中常要⽤到,有些通⽤的内容可集中放在⼀个页⾯⽂件中,其它要⽤到这些内容的页⾯只需要包含(引⽤)这个通⽤⽂件即可。这样便于维护,如果有很多⽹页,当通⽤内容需要修改时,只改⼀个⽂件就可以

了,不需要每个⽂件单独修改。

最典型的应⽤⽐如页脚的版权信息等内容可以放在⼀个叫做⽂件⾥, 然后其他页⾯⽂件在页⾯内容的最后包含这个⽂件就可以了,具体例⼦下⾯有。

html⽂件嵌套,最简单的办法是使⽤SSIServer Side Include)技术,也就是在服务器端两个⽂件就被合并了。除了少数免费⽹页寄存服务外,⼏乎所有的⽹页寄存服务器都⽀持 SSI。这也是⼀个⽐较推荐的⽅法,它与

ASP⽹页使⽤的语法⼀模⼀样。如果⽹站管理员偏向使⽤PHPJSP的话,语法会稍有不同。

对于不能使⽤SSIASPPHPJSP等服务器端动态页⾯语⾔的情况,这⾥还将介绍两种客户端镶嵌的办法:JavaScriptiframe的⽅法。当这两种客户端的⽅法都有很⼤的弊病,⼀般不推荐使⽤。

下⾯对各种⽅法单独具体介绍。

1SSI (Server Side Include)

SSI是⼀种简单的动态⽹页制作技术,但是有些服务器要求⽹页⽂件扩展名为.shtml才能识别⽂件中SSI命令。所以如果你的SSI命令看起来不⼯作,先别放弃,试着把⽂件扩展名改为.shtml,也许会成功。如果知道⾃⼰的服

务器是否⽀持SSI,请看另⼀篇⽂章。

使⽤SSI⼀个局限性是页⾯⼀定要放在⽹页服务器上才能看到效果,在本地是不好调试的。当然,如果⾮要在本地调试,就本地装⼀个Apache服务器好了。

⽐如你想在每个⽹页的底部加上同样的版权信息,像

© 2009 程序员实验室 版权所有

可以把这⾏信息放到⼀个叫做的⽂件⾥,的内容为:

© 程序员实验室 版权所有
;

这样同⼀路径下的其他页⾯⽂件要包含SSI命令是:

(常⽤)

或者

这两者的⼏乎是⼀样的,不同之处在于include virtual后⾯取的是⼀个URL形式的路径,甚⾄还可以执⾏⼀个CGI程序并包含其输出结果,如果你的服务器⽀持CGI的话。⽽include file后⾯取的是⼀个⽂件系统路径,并且不能

执⾏CGI程序。两者都可以接受相对路径,所以对上⾯这个简单例⼦,两者的效果是⼀样的。如果你不知道URL路径与⽂件系统路径两者的区别的话,就⽤include virtual

更多关于SSI的介绍,请看。

2PHP

如果你的服务器⽀持PHP的话,⽤PHP引⽤⽂件的写法如下:

这句命令所在的⽂件扩展名必须被为.php

除了引⽤本服务器上的⽂件,PHPinclude命令还可以⽤来引⽤其它⽹站上的html⽂件,⽐如:

当然你要得到其它⽹站的允许才能引⽤别⼈的⽂件。

3ASP

如果你使⽤的是⽼式的ASP,则语法是与上⾯SSI⼀样的,不需要任何修改,只要把命令所在⽂件的扩展名改为.asp即可。

对于,也是类似,不同之处在于,因为SSI命令是在ASP命令运⾏之前被⾸先编译,所以⽂件名中不能够使⽤的变量。如果⼀定要⽤的话,就⽤的命令来做⽂件嵌套吧。

⽐如:

<%

ile ("")

%>

更多关于怎样在中实现动态⽂件嵌套,请参考。

4JSP Java Server Page)

JSP⽂件需要在基于Java的服务器上运⾏,⽐如。JSP包含⽂件的语法是:

<%@ include file="" %>

5、客户端包含

51 客户端包含的利弊

客户端包含有两种⽅式:JavaScriptiframe。让我们先看看两种⽅法各有什么利弊。

两种⽅法中Javascript⽣成的页⾯格式⽐较好,Javascript可以从⼀个URL取到页⾯⽚断然后镶嵌在另⼀个页⾯的任何位置 。其结果与服务器端包含的结果基本上⼀样,但弊端是客户端必须开启Javascript功能(⽬前⼤多数

⼈是选择开启的,但也有少数出于安全⽅⾯的考虑不开启)。另⼀个弊端是搜索引擎是看不到由Javascript包含的页⾯的内容的,这对你的⽹站推⼴⽐较不利。

使⽤iframe⽐较简单,它可以强制⼀个HTML页⾯镶嵌在另⼀个页⾯中,类似于是⽤ object控件将Flash电影、录像、或者MP3播放器嵌⼊⼀个页⾯中。使⽤iframe,⽤户端不需要开启Javascript功能。但不利的⽅⾯是iframe

有固定的⾼度和宽度,不能随着被嵌⼊页⾯的⼤⼩⽽改变。当被嵌⼊页⾯⼤于给定⾼宽度时,会显⽰滚动条(当然你也可以使⽤ scrolling = "no" 来强制滚动条不显⽰,但这样页⾯内容会显⽰不完整),影响页⾯美观。另外就

是搜索引擎可能不收录iframe引⽤的页⾯,不利⽹站推⼴。

52 使⽤JavaScript的客户端包含

这个⽅法主要适⽤于Firefox浏览器(任何操作系统)IE5以上(Windows)、苹果的Safari浏览器(MacOS X),可以使⽤⼀项叫做 API技术来通过Javascript程序读取⼀个动态读取⼀个XML⽂件。这种⽅法也可以⽤来读取⼀

HTML⽂件,并放到当前⽹页⽂件的指定位置。

专业⽹站设计者:不要⽤这个! 也许在某些情况下你不得不⽤JavaScript来实现⽹页嵌套,但是这只是⼀种转弯抹⾓的替代⽅法。当你的服务器可以⽀持前⾯讲的服务器端嵌套⽅法时,尤其是专业⼈⼠,应尽可能

避免使⽤这种⽅法,因为你的客户可能会投诉你做的⽹页内容⽆法被Google搜索到,或不能在某些浏览器中正常显⽰。

记住这种⽅法做的⽹页只能在FirefoxSafari,IE5以上版本的浏览器中正常显⽰。⼤部分⼈都是⽤这⼏种浏览器的,但是不是所有⼈,⽽且有些⽤户因为安全因素考虑会关闭Javascript功能。

重要提⽰:如果你是在本地电脑上调试⽹页⽽不是在服务器上浏览,最新版本的IE浏览器会⾃动屏蔽Javascript动态⽣成的部分,并显⽰警告信息,你必须选择允许显⽰动态内容⽹页才能正常显⽰。当你把这些

⽹页⽂件放到服务器上去的时候这个问题就会⾃动消失的,因为IE会辨别出主页和被包含的⽹页内容都来⾃同⼀个服务器。

好了,说了够多了,下⾯是具体怎么做。把以下代码放在⽹页的⾥⾯:

有了这段代码我们就可以在⽹页的任何位置插⼊另⼀个页⾯了。⾸先我们要⽣成⼀个作为容器HTML控件,⽐如,并给这个容器控件⼀个ID,⽐如includefooter,然后把这个ID和要包含的页⾯的URL地址传递给

前⾯写的这个js函数clientSideInclude就可以了。

⼀个需要注意的地⽅是函数clientSideInclude只有在页⾯被完全加载后才能⼯作,所以我们需要在标签的onload事件上来调⽤这个函数,这是最保险的调⽤时机,因为这个事件触发的时候浏览器肯定已经完全解析了

页⾯中所有HTML了。

所以,具体代码是:

在需要插⼊另⼀页⾯的地⽅写:

在页⾯开始处标签⾥写:

53 使⽤iframe的客户端包含

客户端页⾯嵌套还可以使⽤iframe的⽅法,弊端是必须事先想好被嵌套的页⾯在⾸页中要占多⼤的位置。如果被嵌套页⾯太⼤,超过事先定义的宽度或⾼度,则⾸页会出现滚动条。这也许正是你所需要的,但也许会完全破坏

主页的设计。

iframe的使⽤很简单,下⾯的例⼦会在你的页⾯中嵌⼊另⼀个叫做的页⾯:

这⾥主页中定义了要插⼊的页⾯将显⽰的⾼度为400的像素,宽度为450个像素。

我们为什么要在 iframe的⾥⾯插⼊⼀个普通的超级链接元素呢?这是因为⽼版本的浏览器和搜索引擎不⽀持iframe,虽然现在已经很少有⼈还会使⽤Netscape 4这样⽼的浏览器了,但是⼏乎所有⼈都会使⽤象Google

样的搜索引擎。在iframe⾥⾯加上超级链接可以帮助搜索引擎找到⽹页的内容。

另外我们可以定义iframe的⼀些属性来控制⽹页的显⽰效果 ,除了前⾯⽤到的最常⽤宽度(width)和⾼度(height)的定义外,如果在任何情况下都不希望出现滚动条的话,可以定义iframescrolling属性等于"no"。如果不希望

镶嵌页⾯的周围出现边框的话,可以将frameborder属性设置为0。下⾯这个例⼦显⽰了scrollingframeborder属性的使⽤: