一、两者的相同点和不同点

相同点:
iframe 和frameset都是html布局的框架布局
不同点:
iframe是一个内联框架,是在页面里生成内部框架
frameset定义一个框架集,包含多个子框架,每个框架都是独立的文档

二、iframe标签

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

2.1格式

<iframe src=""></iframe>

2.2属性

frameborder {int}:是否显示框架的边框;【】0  不显示  1 显示

src
{URL}:指定一个资源(如网页、图片)的uri; scrolling {boolean}:是否显示框架的滚动条;【yes/no/auto】有兼容性问题 noresize 无法调整框架的大小;【noresize="noresize"】 name 框架的名称。

2.3范例

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;}
.clearfloat{zoom:1}
body{
height:90vh;
}
.box{
height:100%;
}
.left{
float:left;
}
.right{
height:100%;
overflow: hidden;
border:1px solid red;
}
</style>
</head>
<body>
<div class="box clearfloat">
<div class="left">
<input type="button" name="aa" value="国家" onclick="clickFn('input')"/>
<input type="button" name="aa" value="星球" onclick="clickFn('input2')"/>
</div>
<div class="right">
<iframe id="mainIframe" style="width:100%;height:100%; " name="mainIframe" src="input.html" frameborder="0" scrolling="auto" ></iframe>
</div>
</div>
<script>
function clickFn(src){
window.open(src +'.html','mainIframe');
          //document.getElementById('mainIframe').src = src +'.html';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;}
.clearfloat{zoom:1}
body{
height:90vh;
}
.box{
height:100%;
}
.left{
float:left;
}
.right{
height:100%;
overflow: hidden;
border:1px solid red;
}
</style>
</head>
<body>
<div class="box clearfloat">
<div class="left">
<input type="button" name="aa" value="国家" onclick="clickFn('input')"/>
<input type="button" name="aa" value="星球" onclick="clickFn('input2')"/>
</div>
<div class="right">
<iframe id="mainIframe" style="width:100%;height:100%; " name="mainIframe" src="input.html" frameborder="0" scrolling="auto" ></iframe>
</div>
</div>
<script>
function clickFn(src){
window.open(src +'.html','mainIframe');
          //document.getElementById('mainIframe').src = src +'.html';
}
</script>
</body>
</html>

效果:

2.4注意事项

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

三、frameset标签

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

3.1 格式

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

3.2子项说明

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

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

3.3属性

frameset 属性:
  rows :表示子框架按行的样式布局(

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

)。以2个子框架为例:cols="30%,*" ,表示第一个框架占整个页面30%的长度,第二个占剩下的;
  noresize="noresize" :表示不调整子框架的范围。

frame
属性:
  src :指向一个资源(如页面、图片等)的URI;   name :指定框架的名称,以便进行框架间的操作。

3.4注意事项

使用frameset标签时,注意要去掉外层的<body></body>标签。
 1.<iframe>优点:

     解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本 2.<iframe>的缺点: *iframe会阻塞主页面的Onload事件; *即时内容为空,加载也需要时间
*没有语意

【html】 iframe 和 frameset 的区别的更多相关文章

  1. HTML iframe 和 frameset 的区别

    转自:http://www.cnblogs.com/polk6/archive/2013/05/24/3097430.html HTML iframe 和 frameset 的区别 iframe 和 ...

  2. html Frame、Iframe、Frameset 的区别 详细出处参考:http://www.jb51.net/web/22785.html

    10.4.1 Frameset与Frame的区别首先讲解Frameset与Frame之间的区别. 用来划分框架,每一个框架由标记.必须在之内使用,代码如下: 在上面的例子当中,把页面分为左右两个部分, ...

  3. iframe与frameset有什么区别

    frame,iframe,frameset 的区别 <FRAMESET> <FRAME><NOFRAMES><IFRAME>欲明白本篇[HTML剖析]之 ...

  4. 使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别。

    注:HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额 ...

  5. html/css基础篇——iframe和frame的区别【转】

    转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...

  6. 详解iframe与frame的区别

    iframe与frame的区别 一.使用iframe的优缺点 优点: 1.程序调入静态页面比较方便; 2.页面和程序分离; 缺点: 1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外 ...

  7. 使用iframe 或frameset框架退出不成功

    iframe .frameset框架有时登录界面加载在框架当中,但我们想直接到登录界面,这时我们可以使用js来实现.if(window!=top) { top.location.href=locati ...

  8. html部分---表单、iframe、frameset及其他字符的用法(以及name、id、value的作用与区别);

    <form action="aa.html" method="post/get"> /action的作用是提交到..,methed是提交方法,用po ...

  9. iframe与frameset(转载)

    frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里 frameset        它称为框架标记,是用来告知HTML文件是框架模式,并且设定可视窗口怎么分割 fram     ...

随机推荐

  1. IDEA Method definition shorthands are not supported by current JavaScript version

    sentinel-dashboard前端用到了AngularJS v1.4.8,在IDEA里修改js,触发js验证时有一些js文件会出现红色波浪线. 在代码行里鼠标一上去提示信息:Method def ...

  2. Bootstrap视频教程

    一.全局CSS样式 0.课件 001.概览_栅格系统 2.排版和代码 3.表格和按钮 4.表单 5.图片 6.辅助类 7.响应式工具 二.组件 8.图标_下拉菜单_按钮组 9.输入框组 10.导航 1 ...

  3. hadoop新旧节点

    注意:黑白名单只出现在名称(nn)节点<!-- 白名单 --><property><name>dfs.hosts</name>/Users/yangya ...

  4. 为macos开启外接显示器hdpi分辨率

    安装了Switch RES,但是缺少当前显示器合适的HDPI分辨率的时候,可以参考这里,自动生成合适的配置文件. https://comsysto.github.io/Display-Override ...

  5. 如何将ubuntu16.04升级到ubuntu 18.04?

    答:步骤如下: 1. sudo apt update (更新软件源) 2. sudo apt upgrade (更新内核相关的包) 3. sudo apt dist-upgrade 4.  sudo ...

  6. 错误代码 2003不能连接到MySQL服务器在*.*.*.*(10061)

    错误代码 2003不能连接到MySQL服务器在*.*.*.*(10061) 错误代码 2003不能连接到MySQL服务器在*.*.*.*(10061)哪位大侠知道怎么解决啊? 在线等!!! [[i] ...

  7. vue-cli 构建的项目 webpack 如何配置不 build 出 .map 文件?

    build命令后占体积最大的竟然是.map文件,webpack如何设置不让编译出.map文件呢?

  8. PCL基础

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=264 许可 建议每一个文件包含一个描述代码作者的许可,这对于用户了解使用该代 ...

  9. 质量保障&&质量体系建设

    一.质量保障 先引用一段 百度百科 上对软件质量保障的解释:软件质量保障是建立一套有计划,系统的方法,来向管理层保证拟定出的标准.步骤.实践和方法能够正确地被项目所采用.软件质量保证的目的是使软件过程 ...

  10. Delphi7-TClientDataSet: 查找

    TClientDataSet[12]: 查找 方法有:1.Locate: 根据字段列表和对应的字段值查找并定位, 找到返回 True.2.Lookup: 根据字段列表和对应的字段值查找, 返回需要的字 ...