HTML5常见的基础标签（7）你所不知道的iframe和frameset

.活动框架 iframe

1. 活动框架iframe,这个框架可以内联或包含另外一个网页文档

语法结构：<iframe></iframe>

实例：

<tr height="100"><td colspan="2">高新区软件园C区食堂管理系统</td></tr>

<ul>

</ul>

</td>

你的浏览器不支持，请升级或更新浏览器

</iframe>

</td>

</tr>

</table>

常用属性：

frameborder:是否显示框架的边框 0：不显示，1：显示

Scrolling:是否显示滚动条

Yes：显示

No:不显示

Auto:自动处理

2. 框架集 frameset

属性rows表示分成几行，一般用“，”隔开。

属性cols表示分成几列，一般用“，”隔开。

使用fameset标签，不再需要body元素

主框架页面：

</frameset>

navlist.html页面：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

</html>

实例1：代码结构

实例1：界面

架

框架技术可以实现对静态页面的互相引用，提高静态页面的重用性，因为并不是所有的浏览器都能很好的支持，而且对搜索引擎可能也不是很友好，所以一般网页使用并不多，但是对一些管理系统而言，框架还是很实用的，因为管理系统的布局比较简单。每一个页面的效果都差不多，一般使用下面这种布局。

这个布局头部，菜单和尾部的内容都是不会变化的，经常变化的就是中间的操作页面，所有可以把头部，菜单和尾部以及主页分别使用四个页面设计，然后在定义一个框架页面进行引入即可。

1、frame页面

top.html

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

leftmenu.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

footer.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

main.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

2、总页面frame.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<base href="<%=basePath%>">
</head>
<frameset rows="20%,65%,*" border="1">
<frame src="top.html">
<frameset cols="25%,*">
<frame src="leftmenu.html">
<frame src="main.html" >
</frameset>
<frame src="footer.html">
</frameset><noframes></noframes>
<body>
</body>
</html>

效果如下：

3、在main中加载新页面

运行上面代码发现超链接是在新的窗口中打开了，如果需要在主框架中显示，要先给这个主框架定义name的属性，然后在修改leftmenu.html的超链接的target属性值，写上主框架的name的值，下面更改frame.html中的frameset代码如下：

补充register.html代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

然后在frame.html中点击注册效果如下：

rame 的最主要功能是用来把一个页面划分成好几个小窗口页面，每个小窗口可以显示不同html文件，这样页面也可以称为框架结构页面，每个月小窗口称作框架窗口，下来将详细介绍框架窗口。

frame 在现在已经很少使用，虽然不是必须学习的，但还是建议了解学习下frame 、iframe的知识，在某些时候非常有用。

什么是 frame 框架

如果想将页面分成上下两部分，各自互相独立又互相关联，用户在其中一个部分操作页面不影响其它部分的页面，这样的页面也叫多窗口页面。

1、框架窗口基本结构：

框架窗口主要包含2部分，一个是框架集，一个是具体的框架文件。

框架集就是存放框架结构的文件，也是访问框架文件的入口，如果网页由上下2个框架窗口组成，那么除了这2个窗口的html文件，还有一个总的框架集文件。

框架文件是每个显示区域对应的html文件，如下示例：

index.html

<html>
<head>
  <title>框架页面</title>
</head>
<body>
  <frameset>
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>
  </body>
</html>

如上index.html 就是框架集文件，在这个框架集文件中定义了页面划分成上下2部分，分别对应top.html 和 bottom.html 2个框架窗口文件。

2、框架窗口分割

框架页面分割方式是在框架集frameset通过rows 或 cols 属性定义的，一般按分割类型分为以下几种：

水平分割窗口
垂直分割窗口
嵌套分割窗口

2.1 水平分割窗口

将页面按水平方向分割，也就是上下结构，语法：

<frameset rows="窗口1高度，窗口2高度，">
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>

在该语法中，rows 可以设置多个值，每个值对应一个框架窗口垂直高度，它的值可以使用像素单位或百分比单位。

如下示例：

<html>
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

显示效果：

比如上面这个，被从上到下分割成3个窗口，高度依次是25%,50%,25%。

2.2 垂直分割窗口

沿着页面垂直方向分割，也就是左右结构的多窗口页面。语法如下：

<frameset cols="窗口1宽度，窗口2宽度，">
  <frame src="left.html"></frame>
   <frame src="right.html"></frame>
  </frameset>

在该语法中，cols 可以设置多个值，每个值对应一个框架窗口水平宽度，它的值可以使用像素单位或百分比单位。

示例：

<html>
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

显示效果：

比如上面这个，被从左到右分割成3个窗口，宽度依次是25%,50%,25%。

2.3、嵌套分割窗口

嵌套窗口就是在一个页面既有水平分割又有垂直分割的窗口，如下示例：

先水平分割再垂直分割

<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>

显示效果：

先垂直分割再水平分割

<frameset cols="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset rows="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>

显示效果：

理论上可以无限嵌套，是不是很好玩。

2.4、noframes

当浏览器布置frame 时会显示noframes 中的内容。如下代码：

<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

效果显示：

框架集的属性

1、设置边框 —— frameborder

frameborder 等于0时不显示边框，默认显示。

2、边框宽度 —— framespacing

在html5中无效。

3、边框颜色 —— bordercolor

如下代码：

<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

效果：

具体可以参考这里 https://www.cnblogs.com/lavenderzh/archive/2012/04/09/2438803.html 查看这几个属性的关系。

框架页面属性

1、页面源文件 —— src

就是每个框架窗口对应的html文件，这里可以是图片或其它文件。

<frame src="文件地址">

2、页面名称 —— name

给每个框架窗口设置名称，有助于链接或查找窗口。

<frame src="文件地址" name="页面名称">

3、禁止调整窗口尺寸 —— noresize

党员鼠标拖到框架边框时，会发现鼠标形状变成可拖动的，可以改不框架窗口宽度或高度。如果不希望改变窗口宽度或高度，可以使用noresize 属性。

如下示例：

<html>
<frameset cols="25%,50%,25%">
  <frame noresize="noresize"  src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

窗口a是不可改变宽度的。

浮动框架 —— iframe

浮动框架是一种特殊的框架，它是在主窗口中嵌套一个子窗口，也就是整个页面不是框架页面，但却包含了一个框架窗口。

示例：

<iframe name="名称" src="https://www.w3school.com.cn/" width="800px" height="600px"></iframe>

效果如下：

1、浮动框架边框 —— frameborder

frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

显示效果：

2、链接到框架页面

通过 a 标签的 target 属性可以跳转到框架页面，示例如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>
<iframe src="http://www.runoob.com/" name="iframe_a"></iframe>
<p><a href="https://mp.toutiao.com/" target="iframe_a">头条号</a></p>
<p><a href="http://www.runoob.com/" target="iframe_a">菜鸟教程</a></p>
</body>
</html>

显示效果如下，点击下面2个链接，切换窗口。

总结

frame 和 iframe 浮动框架用途很广，比如可以实现页面局部刷新，在之前被广泛使用，但是现在基本不建议使用，它有很多问题，比如安全性，性能方面等。

当然有时也会使用iframe，比如打印pdf，下载文件等等。

上篇：前端入门——html 表单控件使用

在线咨询

上一篇：思维导图学JavaScript（附高清下载）
下一篇：javascript 获取网页各种宽度

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5常见的基础标签（7）你所不知道的iframe和frameset

.活动框架 iframe

2. 框架集 frameset

架

1、frame页面

2、总页面frame.html

3、在main中加载新页面

什么是 frame 框架

框架集的属性

框架页面属性

浮动框架 —— iframe

总结

您的项目需求