`
ITHorizon
  • 浏览: 1700 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

html的嵌套

 
阅读更多

      

  这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。

  这样便于维护,如果有很多网页,当通用内容需要修改时,只改一个文件就可以了,不需要每个文件单独修改。

  最典型的应用比如页脚的版权信息等内容可以放在一个叫做footer.html文件里, 然后其他页面文件在页面内容的最后包含这个文件就可以了,具体例子下面有。

 

  要实现html嵌套技术:SSI

  要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> &copy; 程序员实验室 版权所有</center>;

这样同一路径下的其他页面文件要包含footer.html的SSI命令是:

<!- #include virtual="footer.html" ->(常用)//左边位ssi命令

或者

<!- #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" 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

 

分享到:
评论

相关推荐

    HTML嵌套Flash播放视频插件及源码.zip

    HTML嵌套Flash播放视频插件是一种常见的技术,用于在网页中播放视频内容。这项技术结合了HTML和Adobe Flash的优点,使得视频播放体验更加流畅且功能丰富。Flash在过去的Web开发中占据重要地位,尤其在多媒体内容展示...

    借助于网上messenger.js完成可以跨域的Html嵌套调用

    在跨域HTML嵌套调用的场景中,`parent`通常代表父页面,而`child`则代表被嵌入的子页面。`parent.html`可能包含一个`iframe`元素,其`src`属性指向`child.html`,这样`child.html`就会在`parent.html`中被加载,形成...

    文件上传html嵌套xss语句.docx

    文件上传html嵌套xss语句

    div嵌套html不用iframe

    最近在做作业中需要在不用iframe的情况下嵌套页面,所以只好在div中嵌套,用的是jquery方法。 复制代码代码如下: [removed] $(document).ready(function() { $(“#button”).click(function() { $(“#content”)....

    Html页面嵌套页面练习

    在“Html页面嵌套页面练习”这个主题中,我们主要关注如何通过HTML来创建美观且功能丰富的网页,其中包括主页、注册页面、登录页面以及搜索页面的设计。 首先,让我们来探讨主页的设计。一个吸引人的主页不仅要有...

    JS获取元素多层嵌套思路详解

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧。 HTML: &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta ...

    html为内边框加颜色而嵌套TABLE边框不显示出来的两种方法.pdf

    在HTML中,为内边框添加颜色而嵌套表格时,可能会遇到外层表格边框不显示的问题。这个问题通常由于CSS样式冲突或者表格属性设置不当所引起。文档中提供了两种解决方法来解决这个问题。 方法一: 这种方法利用了CSS...

    XHTML标签嵌套规则

    strict模式下,XHTML标签的嵌套规则。

    winfrom中嵌套html,跟html的交互

    在Windows Forms(WinForms)应用开发中,有时候我们需要在应用程序中展示富文本或者实现复杂的用户交互,这时可以采用嵌入HTML的方式。本文将详细介绍如何在WinForms中嵌入HTML,并与HTML进行交互,同时通过提供的...

    HTML5列表的嵌套应用.pdf

    HTML5 列表的嵌套应用 HTML5 列表的嵌套应用是指在 HTML5 中创建嵌套列表的方法和技术。嵌套列表是指在一个列表项中包含另一个列表项,以便更好地组织和展示信息。在 HTML5 中,使用 `&lt;ul&gt;` 和 `&lt;li&gt;` 元素可以创建...

    java ui 嵌套html

    自己上传自己下载,Java swing 嵌套html

    在html页面使用excel的在线编辑

    在HTML页面上实现Excel的在线编辑是一项常见的需求,特别是在企业级应用中,用户可能需要在网页上直接查看、编辑和保存Excel数据。本教程将详细讲解如何在HTML页面上集成Excel在线编辑功能,并重点关注免费的基本...

    网页中嵌套google地图(功能很强大)

    例如,"网页中嵌套google地图"可能包含了多个标记和信息窗口,展示了如何动态添加地图元素。 5. **交互性增强**: 右键菜单是提升用户交互体验的一种方式。在"google地图有右键菜单.html"文件中,可能实现了通过监听...

    html嵌入winform(xilium.CefGlue)

    vs2012写的一个小demo,xilium.CefGlue.3.2272.2035的使用,html嵌入winform替代vs自带控件webBrowser,内容非常简单,没有相互交互的代码,交互功能网上很多,主要是提交包含可用的dll等,注意下载,亲测可用。

    html中嵌套js下拉列表框

    ### HTML中嵌套JS实现下拉列表功能 在本文中,我们将探讨如何使用HTML与JavaScript结合来创建一个具有动态下拉列表功能的网页。通过分析提供的代码示例,我们可以了解到如何利用JavaScript控制HTML元素的显示与隐藏...

    html标签的嵌套规则介绍

    strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱嵌套,那么,html标签的嵌套规则有哪些呢? 一、HTML 标签包括 块级元素(block)...

    android嵌套HTML的程序,相互间传值

    在这种情况下,"android嵌套HTML的程序,相互间传值"是一个重要的技术点,它涉及到如何在Android应用和内嵌的H5页面之间有效地传递数据。以下是对这个主题的详细讲解: 一、Android壳嵌套HTML界面 1. Webview组件...

    正则表达式匹配闭合HTML标签(支持嵌套)

    HTML标签可以嵌套使用,因此,编写能够匹配闭合标签的正则表达式具有一定的难度。 首先,要匹配闭合的HTML标签,我们需要理解HTML标签的基本结构。一个典型的HTML标签包括起始标签、标签内容以及闭合标签。例如,...

    前端开源库-html-nest-rule

    HTML嵌套规则主要涵盖以下几个方面: 1. **元素的正确嵌套**:HTML元素必须正确嵌套,即每个打开的标签`&lt;tag&gt;`必须有相应的关闭标签`&lt;/tag&gt;`,并且子元素应该完全包含在父元素内。例如,`&lt;div&gt;&lt;p&gt;内容&lt;/p&gt;&lt;/div&gt;`是...

Global site tag (gtag.js) - Google Analytics