如何将一个html页面中嵌入另一个html页面

html-css014

如何将一个html页面中嵌入另一个html页面,第1张

将一个html页面中嵌入另一个html页面步骤如下:

1、首先,要嵌入html并不一定要写js代码,如图使用iframe标签,设置其src属性即可。注意其scrolling="auto"以添加滚动条。另外,其width和height要单独设置。

2、其链接到的html页面内容如图所示。给其添加如图meta标签,增加自动刷新功能。

3、在Python编写的httpserver中(Tornado),这两个url的请求都要处理。以本程序为例,用户浏览器载入main以后,main页面中的iframe标签会自动载入todolist。

4、如图是通过浏览器访问main页面,可以看到下面的框框中显示的就是todolist页面的内容。

5、另外,其右侧自带滚动条,而且这个潜入的页面设置了自动刷新,会时刻保持更新。

6、如果关闭了httpserver,会看到如簇所示情况,嵌入的页面刷新失败。但是main页面没有自动刷新,无影响。

使用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>

html文件嵌套,最简单的办法是使用SSI(Server Side

Include)技术,也就是在服务器端两个文件就被合并了。除了少数免费网页寄存服务外,几乎所有的网页寄存服务器都支持

SSI。这也是一个比较推荐的方法,它与ASP和ASP.NET网页使用的语法一模一样。如果网站管理员偏向使用PHP或JSP的话,语法会稍有不同。

对于不能使用SSI、ASP、ASP.NET、PHP和JSP等服务器端动态页面语言的情况,这里还将介绍两种客户端镶嵌的办法:JavaScript和iframe的方法。当这两种客户端的方法都有很大的弊病,一般不推荐使用。