HTML iframe 和 frameset 的区别

HTML iframe 和 frameset 的区别

  iframe 和 frameset 都用于html页面的框架布局。

目录:

1. <iframe> 标签:iframe 是个内联框架,是在页面里生成个内部框架。

2. <frameset> 标签:frameset 定义一个框架集,包含多个子框架,每个框架都有独立的文档。

1. <iframe> 标签

iframe 是个内联框架,是在页面里生成个内部框架。

1.1 格式

<iframe></iframe>

1.2 属性

frameborder {int}:是否显示框架的边框;

src {URL}:指定一个资源(如网页、图片)的uri;

scrolling {boolean}:是否显示框架的滚动条;

width {int}:定义iframe的宽度;

height {int}:定义iframe的高度;

1.3 示例

<body>
<h3>HTML标签演示</h3>
<iframe src=1.1-ShowHtml.htm ></iframe>
</body>

1.4 注意事项

在 "<iframe>我是内容</iframe>" 内添加内容时,在展示页面不会显示添加的内容。所以还是使用src属性指定一个页面吧。

1.5 应用场景

1) 版本升级页面,版本日志过多,可以把升级的信息放到一个iframe里。
2) 富文本编辑框,如博客园的【新建随笔】区域。

2. <frameset> 标签

frameset 定义一个框架集,包含多个框架,每个框架都有独立的文档。

2.1 格式

<frameset >
  <frame src=a.htm />
  <frame src=b.htm />

  <noframes></noframes>
</frameset>

2.2 子项说明

<frame src=a.htm /> :子框架

<noframes></noframes>:浏览器不支持此框架的时,显示的内容。

2.3 属性

frameset 属性:

  rows :表示子框架按行的样式布局()。以2个子框架为例:rows="30%,*" ,表示第一个框架占整个页面30%的高度,第二个占剩下的;

  cols :表示子框架按列的样式布局()。以2个子框架为例:cols="30%,*" ,表示第一个框架占整个页面30%的长度,第二个占剩下的;

  noresize="noresize" :表示不调整子框架的范围。

frame 属性:

  src :指向一个资源(如页面、图片等)的URI;

  name :指定框架的名称,以便进行框架间的操作。

2.4 示例

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>frameset 演示</title>
</head>
<frameset rows="30%,*"  noresize="noresize">
    <frame src=DateGrid.htm name="frm1"  />
    <frame src=Dialog.htm  name="frm2"/>
    <noframes></noframes>
</frameset>
</html>

2.5 注意事项

使用frameset标签时,注意要去掉外层的<body></body>标签。

2.6 子框架间的操作

参照示例代码,frm1更改frm2的子集指向的页面:window.parent.frames["frm2"].location.href = ‘b.htm‘

2.7 应用场景

1) 后台页面的管理,左边显示 菜单,右边框架 显示详细页面。

2) 功能菜单页面,如bbs.csdn.net

3. 小知识

  浏览页面中的框架时,在框架页面内 点击右键,会多出框架的信息。

以chrome为例:

  

时间: 2024-10-25 13:54:04

HTML iframe 和 frameset 的区别的相关文章

jquery 操作iframe、frameset

============================================iframe <iframe name="a" src="a.aspx" width="300px" height="200px"></iframe> <iframe name="b" src="b.aspx" width="300px" height

struts2中用iframe遮罩frameset

项目中遇到的遮罩问题 ///////////////////////////////////index.jsp///////////////////////////////////////// <html><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri=&qu

iframe与frameset

frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里 frameset        它称为框架标记,是用来告知HTML文件是框架模式,并且设定可视窗口怎么分割 fram               它只是设定某一个框架窗口中的参数属性 iframe            它是在一个页面中嵌入一个框架窗口 frameset的属性 1.cols                     它是把整个画面竖向分割成几个画面2.rows                   它是把整个

自己写的_top、_parent以及对iframe和frameset的理解

iframe可以写在<body>标签里,如<body><iframe src="xxx"  name="xxx" style="width:100%;height:500px;"/></body>    iframe标签要成对,不然后面的标签不起作用 frameset不可以写在<body>标签里,如: <html xmlns="http://www.w3.org/1999

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

CSS3 border-radius边框圆角

CSS3 border-radius边框圆角http://www.cnblogs.com/polk6/p/6050818.html 在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

ExtJS4.2.1

1. 介绍 1.1 说明 ExtJS是一个用javascript.CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前端Ajax框架. 常用于企业内部管理系统.行政系统等SAP类型的应用. 1.2 特点 1) 提供了非常多的丰富.功能强大的组件. 2) 面向组化件开发,区别于jQuery的面向Dom开发. 3) 跨浏览器支持:IE.Chrome.Firefox.Safari.Opera. 4) 框架体积庞大,适合编写内网项目.(ExtJS4.2.1的ext-all.js

JavaScript 属性介绍

本篇主要介绍JS中对象的属性,包括:属性的分类.访问方式.检测属性.遍历属性以及属性特性等内容. 目录 1. 介绍:描述属性的命名方式.查找路径以及分类 2. 属性的访问方式:介绍'.'访问方式.'[ ]'中括号访问方式 3. 删除属性:通过delete关键字删除对象的某个属性 4. 检测属性:介绍三种判断某个属性是否为对象的实例属性:in.obj.hasOwnProperty.obj.propertyIsEnumerable 5. 遍历属性:介绍三种遍历对象的属性:for / in 语句块.O