【html】 iframe 和 frameset 的区别
一、两者的相同点和不同点
相同点：
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 的区别的更多相关文章
- HTML iframe 和 frameset 的区别
转自:http://www.cnblogs.com/polk6/archive/2013/05/24/3097430.html HTML iframe 和 frameset 的区别 iframe 和 ...
- html Frame、Iframe、Frameset 的区别 详细出处参考：http://www.jb51.net/web/22785.html
10.4.1 Frameset与Frame的区别首先讲解Frameset与Frame之间的区别. 用来划分框架,每一个框架由标记.必须在之内使用,代码如下: 在上面的例子当中,把页面分为左右两个部分, ...
- iframe与frameset有什么区别
frame,iframe,frameset 的区别 <FRAMESET> <FRAME><NOFRAMES><IFRAME>欲明白本篇[HTML剖析]之 ...
- 使用iframe的优缺点，为什么少用iframe以及iframe和frame的区别。
注:HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额 ...
- html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...
- 详解iframe与frame的区别
iframe与frame的区别 一.使用iframe的优缺点 优点: 1.程序调入静态页面比较方便; 2.页面和程序分离; 缺点: 1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外 ...
- 使用iframe 或frameset框架退出不成功
iframe .frameset框架有时登录界面加载在框架当中,但我们想直接到登录界面,这时我们可以使用js来实现.if(window!=top) { top.location.href=locati ...
- html部分---表单、iframe、frameset及其他字符的用法（以及name、id、value的作用与区别）；
<form action="aa.html" method="post/get"> /action的作用是提交到..,methed是提交方法,用po ...
- iframe与frameset（转载）
frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里 frameset 它称为框架标记,是用来告知HTML文件是框架模式,并且设定可视窗口怎么分割 fram ...
随机推荐
- postgresql数据库的 to_date 和 to_timestamp 将 字符串转换为时间格式
数据库中:字符串 转换为 时间格式 二者区别: to_data 转换为 普通的时间格式 to_timestamp 转换可为 时间戳格式出错场景: 比较同一天 日期大小的时候,很容易出错 ...
- Qt控制台输出QString
有时候想在控制台输出我们想要的QString变量. 1.qDebug可以实现在控制台终端打印,但我们还是想使用C++中的std::cout<<variable This function ...
- Qt VS MFC
最近用了一段时间Qt,觉得网上这篇文章讲述Qt与MFC之间的区别很到位,分享一下. ----------------------------------原文---------------------- ...
- mysql 创建++删除 数据库
创建RUNOOB数据库,并设定编码集为utf8 CREATE DATABASE IF NOT EXISTS RUNOOB DEFAULT CHARSET utf8 COLLATE utf8_gener ...
- Fragment 和Activity的数据传递实例代码
package com.example.fragment; import android.os.Bundle; import android.support.v4.app.FragmentActivi ...
- 'pybot.bat' 不是内部或外部命令,也不是可运行的程序
在通过命令行工具 运行RobotFramework的文件, 会使用到pybot.bat. 在dos输入pybot提示'pybot' 不是内部或外部命令,也不是可运行的程序或批处理文件, 可以在pyth ...
- docker搭建pxc
1.下载镜像 curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.i ...
- Python multiprocess模块(中)
主要内容: 一. 锁 二. 信号量 三. 事件 通过event来完成红绿灯模型 四. 队列(重点) 队列实现进程间的通信 五. 生产者消费者模型 1. 初始版本(程序会阻塞住) 2. 升级版本一(通过 ...
- node 笔记整理
node 合并多个请求的数据 function getList1(num) { var url= "netease/search?keyword=独孤天下&type=song& ...
- 奥比中光Astra Pro的使用(1)
在ubuntu上的使用 首先下载SDK以及OpenNI安装包,下载地址: 解压两个安装包 切换目录到AstraSDK-Linux下的install目录,并输入命令:sudo sh ./install. ...