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

html-css018

如何将一个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页面没有自动刷新，无影响。

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

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

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

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

HTML中的嵌套通常使用<iframe >标签，iframe 元素会创建包含另外一个文档的内联框架（即行内框架），所有浏览器都支持

使用方法示例：

a.html代码

<html>

<body>

<p style="color: #009F95">我是嵌入的HTML上面的标签</p>

<iframe src="b.html" frameBorder="0" width="900" scrolling="no" height="30px"></iframe>

<p style="color: #009F95">我是嵌入的HTML下面的标签</p>

</body>

</html>

b.html代码

<body>

<p>这里是页内被嵌入的HTML</p>

</body> 常用属性说明

frameborder  规定是否显示框架周围的边框。 1为显示 0为隐藏

scrolling         规定是否在 iframe 中显示滚动条。yes 为显示 no为不显示 auto会自动判断

src                  引用的HTML页面

width             定义 iframe 的宽度。

height            规定 iframe 的高度。

marginheight 定义 iframe 的顶部和底部的边距。

marginwidth  定义 iframe 的左侧和右侧的边距。

name             规定 iframe 的名称。