博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML iframe 和 frameset 的区别
阅读量:5375 次
发布时间:2019-06-15

本文共 1371 字,大约阅读时间需要 4 分钟。

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

目录:

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

2. :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 示例

HTML标签演示

 

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 示例

    frameset 演示            

 

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为例:

  

 

转载于:https://www.cnblogs.com/polk6/archive/2013/05/24/3097430.html

你可能感兴趣的文章
指向“”的 script 加载失败
查看>>
[PTA] 数据结构与算法题目集 6-12 二叉搜索树的操作集
查看>>
AngularJS学习篇(十五)
查看>>
【转】Java中Synchronized的用法
查看>>
算法之道:形而之上谓之道
查看>>
软件工程进度条-第四周
查看>>
mysql 批量导出建表语句 (视图,函数同理)
查看>>
css 变量与javascript结合
查看>>
Redis 任务队列(生产者消费者)
查看>>
从关联表创建数据库
查看>>
Delphi的"Invalid pointer operation"异常的解决办法 (转)
查看>>
正则表达式整理
查看>>
#一周五# (视频) 手掌四轴Estes 4606,树莓派2和WRTNode,WinHEC 2015深圳
查看>>
第五—八章 [bx]和loop指令
查看>>
Javascript 浮点运算问题分析与解决
查看>>
Ubuntu网络频繁掉线解决方案
查看>>
CF550 DIV3
查看>>
2js基础
查看>>
luogu P3225 [HNOI2012]矿场搭建
查看>>
SharePoint 2010 常用技巧及方法总结
查看>>