当前位置: 首页 > 编程日记 > 正文

frame,iframe,frameset之间的关系与区别

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

框架概念
所谓框架便是网页画面分成几个框窗,同时取得多个 URL。只需要 <FRAMESET> <FRAME> 即可,而所有框架标记需要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 <BODY> 标记,浏览这框架必须读取这档 案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗,每一框窗由一个 <FRAME> 标 记所标示,<FRAME>必须在 <FRAMESET> 范围中使用。如下例:
<frameset cols="50%,*">
<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">
</frameset>
此例中 <FRAMESET> 把画面分成左右两相等部分,左便是显示 up2u.html,右边则会显示 me2.html 这档案,<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序。

本节与 Composer 教室的【运用框架】大部分相同,只是本节增加了内容及较为详细,正 如其它篇章一样并不会提及网页制作工具,若阁下学会了 HTML 相信你亦不会选用 Composer , FrontPage 一类的工具了。

<FRAMESET> <FRAME>

<FRAMESET> 称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。
<FRAME> 则只是设定某一个框窗内的参数属性。
<FRAMESET> 参数设定:
例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">

COLS="90,*"
垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如COLS="30,*,50%" 可以 切成叁个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当 分配完第一及第叁个视窗後剩下的空间,第叁个视窗则占整个画面的 50% 宽度 为 一相对分割。您可自己调整数字。
ROWS="120,*"
就是横向切割,将画面上下分开,数值设定同上。唯 COLS 与 ROWS 两参数尽量 不要同在一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类形的框架,尽 采用多重分割。
frameborder="0"
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避 免使用 yes 或 no )
border="0"
设定框架的边框厚度,以 pixels 为单位。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【调色原理】。
framespacing="5"
表示框架与框架间的保留空白的距离。
<FRAME> 参数设定:
例子:<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">

SRC="a.html"
设定此框窗中要显示的网页档案名称,每个框窗一定要对应着一个网页档案。你可 使用绝对路径或相对路径,有关此两者详见於【连结进阶】 。
NAME="top"
设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避 免使用 yes 或 no )
framespacing="6"
表示框架与框架间的保留空白的距离。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【HTML 剖析】。
scrolling="Auto"
设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示, AUTO是视情况显示。
noresize
设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随 意地拉动框架,改变其大小。
marginhight=5
表示框架高度部份边缘所保留的空间。
marginwidth=5
表示框架宽度部份边缘所保留的空间。
以下是一些例子:(与 Composer 教室的【运用框架】相同)

例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>

例子 HTML Code
<frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset>

例子 HTML Code
<frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="a.html">
<frame name="lower_left" src="b.html">
</frameset>
<frame name="right" src="c.html">
</frameset>

例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>

例子 HTML Code
<frameset cols="150,*">
<frame name="left" src="a.html">
<frameset rows="80,*">
<frame name="upper_right" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>


<NOFRAMES>
当别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免 这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容,而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可。
应用方法:
在<frameset> 标记范围加入 </NOFRAMES> 标记,以下是一个例子:

<frameset rows="80,*">
<noframes>
<body>
很抱歉,阁下使用的浏览器不支援框架功能,请转用新的浏览器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
若浏览器支援框架,那麽它不会理会 <noframes> 中的东西,但若浏览器不支援框架,由 於不认识所有框架标记,不明的标记会被略过,标记包围的东西便被解读出来,所以放在 <noframes>范围内的文字会被显示。

<IFRAME> : 

这标记只适用於 IE(comet:也使用于FireFox)。 它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是 一个围堵标记,但围着的字句只有在浏览器不支援 iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 JavaScript 会较好,若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。PS:一定要使用</iframe>关闭,否则后面的内容显示不出来。

<iframe> 的参数设定如下:
例子: <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe>

src="iframe.html"
欲显示於此框窗的文件来源除档案名称,必要加上相对或绝对路径。
name="test"
此框窗名称,这是连结标记的 target 参数所需要的,
align="MIDDLE"
可选值为 left, right, top, middle, bottom,作用不大
width="300" height="100"
框窗的宽及长,以 pixels 为单位。
marginwidth="1" marginheight="1"
该插入的文件与框边所保留的空间。
frameborder="1"
使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling="Yes"
使用 Yes 表示容许卷动(内定), No 则不容许卷动

frameiframe的区别

1、frame不能脱离frameSet单独使用,iframe可以;

2、frame不能放在body中;如下可以正常显示:

<!--<body>-->

<frameset rows="50%,*">

<frame   name="frame1"    src="test1.htm"/>

<frame   name="frame2"    src="test2.htm"/>

</frameset>

<!--<body>-->

如下不能正常显示:

<body>

<frameset rows="50%,*">

<frame   name="frame1"    src="test1.htm"/>

<frame   name="frame2"    src="test2.htm"/>

</frameset>

<body>

3、嵌套在frameSet中的iframe必需放在body中;如下可以正常显示:

<body>

<frameset>

<iframe   name="frame1"    src="test1.htm"/>

<iframe   name="frame2"    src="test2.htm"/>

</frameset>

</body>

如下不能正常显示:

<!--<body>-->

<frameset>

<iframe   name="frame1"    src="test1.htm"/>

<iframe   name="frame2"    src="test2.htm"/>

</frameset>

<!--</body>-->

4、不嵌套在frameSet中的iframe可以随意使用;
      如下均可以正常显示:

<body>

<iframe   name="frame1"    src="test1.htm"/>

<iframe   name="frame2"    src="test2.htm"/>

</body>



<!--<body>-->

<iframe   name="frame1"    src="test1.htm"/>

<iframe   name="frame2"    src="test2.htm"/>

<!--</body>-->

5、frame的高度只能通过frameSet控制;iframe可以自己控制,不能通过frameSet控制,如:

<!--<body>-->

<frameset rows="50%,*">

<frame   name="frame1"    src="test1.htm"/>

<frame   name="frame2"    src="test2.htm"/>

</frameset>

<!--</body>-->


<body>

<frameset>

<iframe height="30%"   name="frame1"    src="test1.htm"/>

<iframe height="100"   name="frame2"    src="test2.htm"/>

</frameset>

</body>

6、如果在同一个页面使用了两个以上的iframe,在IE中可以正常显示,在firefox中只能显示出第一个;使用两个以上的frame在IE和firefox中均可正常

以上代码在IE7和firefox2.0中测试。




转载于:https://my.oschina.net/u/257674/blog/165412

相关文章:

最低售价17999元,华为发布新一代折叠屏手机Mate X2,将首批升级HarmonyOS

2019年&#xff0c;华为发布第一代折叠屏Mate X&#xff0c;开启了5G折叠屏手机新纪元&#xff1b;2020年&#xff0c;华为发布第二代折叠屏Mate Xs&#xff0c;实现了折叠屏手机从硬件到生态的演进。 2月22日&#xff0c;华为举行新一代折叠旗舰发布会&#xff0c;发布全新折…

「要拼就拼运维」5分钟一台?它让我爱上工作了!

高效运维轻松管理本文转自d1net&#xff08;转载&#xff09;

JavaScript去除字符串首尾空格

function trim(str) { return str.replace(//s/g,""); } javascript去除字符串空格的函数 function jtrim(s) { var i,b0,es.length; for(i0;i<s.length;i) //去左空格 if(s.charAt(i)! ){bi;break;} if(is…

server-send event object

http://jamie-wang.iteye.com/blog/1849193 event -- onmessage, onopen, onerror 不是方法&#xff0c;而是事件 http://school.youth.cn/px/lamp/2012/1130/38537.shtml http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/index.html?cadrs http://bb…

拿来就能用!Dijkstra 算法实现快递路径优化

作者 | 李秋键责编 | 伍杏玲出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;近几年来&#xff0c;快递行业发展迅猛&#xff0c;其中的程序设计涉及到运送路径的最优选择问题&#xff0c;下面我们尝试模拟实现快递路径优化问题&#xff0c;假设为快递公司设计快递投递…

92号油的发动机能加97吗?标号越高不代表就越好

当我们买了车&#xff08;不管是二手还是新车吧&#xff09;&#xff0c;我们都能很快知道这车的发动机是加什么标号的汽油的。这些信息都能在说明书或者在加油盖附近找到。但同时很多粉丝也在问&#xff0c;我的车是92的&#xff0c;但我加97的话发动机会不会更有力更省油&…

不要跳槽!!!

在这个俗称“金三银四”的跳槽季&#xff0c;很多人都蠢蠢欲动&#xff0c;想要拿更高的薪资&#xff0c;想要去更大的平台......但我也要奉劝大家一句&#xff1a;三思而后行。确实&#xff0c;春节过后&#xff0c;大家都在为开年做准备&#xff0c;跳槽也好&#xff0c;学习…

按下回车键指向下一个位置的一个函数

functiontofocus(itemname) // 按回车置下一个位置 2{ 3vara 4aeval( " document.vouch. "itemname) 5a.focus() 6} 7 在控件中使用onkeypress" javascrip:if(window.event.keyCode13){tofocus(nextformname)}提取下一个控件名

初涉LR,关联

摘要&#xff1a;Loadrunner是一种很好的性能测试工具&#xff0c;它通过对创建Vuser脚本、定义场景、运行场景、分析结果四大模块来进行性能负载测试。 在回放脚本时有时会出现运行不成功的情况&#xff0c;有可能是因为之前所录制的参数与现实的不一致的原因&#xff0c;比如…

新型智能电视攻击,9成国外设备或受影响

在近日举办的欧洲广播联盟媒体网络安全研讨会上&#xff0c;瑞士安全研究员Rafael Scheel分享了一种针对智能电视的新型攻击方法&#xff1a;通过发送恶意数字视频地面广播信号(DVB-T)&#xff0c;实现远程控制电视设备并获得智能电视root访问权限&#xff0c;之后利用电视可以…

按esc键退出的一个函数

1functionesckey(keycode) // 按esc键退出2{ 3if (keycode 27 ) 4{ 5window.close() 6} 7}

Linux挂载卸载光盘实践

在Linux下有时候需要挂载光盘&#xff0c;拷贝文件或安装系统&#xff0c;例如拷贝Redhat操作系统镜像文件等。下面介绍一下在Linux系统下挂载、卸载光盘的方法。 在Linux系统中&#xff0c;每一个物理设备都可以看做是一个文件&#xff0c;而像硬盘、光盘等物理设备文件都在/d…

程序员晒元宵节福利,网友:看了我想砸键盘......

再过几天就到元宵节了&#xff0c;又到了互联网大厂晒福利、拉仇恨的时候了。小编在脉脉上看到许多不愿透露姓名的网友的爆料&#xff0c;一起来看看吧。有的网友说收到了汤圆&#xff0c;还有员工说收到了四盒草莓&#xff0c;但是还有网友透露自己喜提加班&#xff0c;更有甚…

tomcat_deploy 平滑启动脚本

1.此脚本需要nginx安装ginx_upstream_check_module 配置完成平滑重启 2.脚本内容如下&#xff1a; 1 #!/bin/bash2 cat <<MADAY3 ---------------------------------------------------------4 -------------------------------------------------------------5 A)服…

判断输入是否为中文的函数

1functionischinese(s){ 2varrettrue ; 3for ( vari0 ;i < s.length;i) 4 retret &&(s.charCodeAt(i) > 10000 ); 5returnret; 6 }

OpenERP与Python 元编程

Python元编程被称为“黑魔法”。Python界的传奇人物Tim Peters有云&#xff1a; 引用 Python的元编程这种黑魔法99%的人都无需了解&#xff0c;如果你拿不准是否应该用到它时&#xff0c;你不需要它. OpenERP基本遵循了Tim Peters的教诲&#xff0c;但是却在6.1版本之后忍不住触…

联手中科大、浙大、华科大等高校,阿里研发4项最新AI安全技术

随着互联网技术对抗环境日益复杂化&#xff0c;各大网络平台页面可供用户上传并做展示的内容&#xff0c;都可能面临恶意攻击&#xff0c;例如黑灰产团伙会发布色情等不良图片和视频&#xff0c;以及发布可能涉嫌抄袭侵权的商品或其他违规信息&#xff0c;甚至一些黑灰产团伙还…

联想S820 MIUI刷机包 MIUI 4.4.30 流畅执行 在线主题破解

ROM介绍 破解免费使用MIUI全部主题(方法&#xff1a;开机开启Root权限&#xff0c;进入WSM工具箱→安装二进制文件→重新启动→再次进入WSM工具箱→两个工具打上勾→重新启动)&#xff0c;然后尽情奔放吧 .加入V4A音效 .加入安卓4.4切换特效 .加大外放音量。不爆音 .集成 WSM …

列表框操作函数集合

1 /*列表框互相操作函数集 */23// 描述: 添加不重复列表框元素4functionselAdd( srcList, dstList )5 {6varselectedIndex newArray();7varcount 0 ;89for( i0 ; i < srcList.options.length; i ){1011if( srcList.options[i].selected ){1213selectedIndex[count] i;14…

看过漫改,但你看过「改漫」吗?AI 一键让影视变漫画

作者 | 神经小兮来源 | HyperAI超神经头图 | 下载于视觉中国把影视剧变成漫画&#xff0c;是怎样的一种神操作&#xff1f;来自大连理工大学和香港城市大学的团队&#xff0c;最新提出的 AI 框架&#xff0c;可自动将影视剧转换为漫画。从此&#xff0c;观影追剧又多了一种打开…

跨越企业的“中等收入陷阱”

在国际经济学中&#xff0c;有一个“中等收入陷阱”的概念&#xff0c;含义为&#xff1a;新兴市场国家突破人均GDP1000美元的“贫困陷阱”后&#xff0c;很快会奔向1000美元至3000美元的“起飞阶段”&#xff1b;但到人均GDP3000美元附近以后&#xff0c;快速发展中积聚的矛盾…

docker 数据卷与容器卷

2019独角兽企业重金招聘Python工程师标准>>> 容器中管理数据主要有两种方式&#xff1a; 数据卷&#xff08;Data Volumes&#xff09; 数据卷容器&#xff08;Data Volumes Dontainers&#xff09; 数据卷 使用-v可以挂载一个本地的目录到容器中作为数据卷。 [root…

document.all与WEB标准

1、DOM  WEB标准现在可真是热门中热门&#xff0c;不过下面讨论的是一个不符合标准的document.all[]。DOM&#xff0d;&#xff0d;DOCUMENT OBJECT MODEL文档对象模型&#xff0c;提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色&#xff0c;那就可…

终于有人把Python讲清楚了!

经常有人问我&#xff0c;Python初学者该怎么学好Python&#xff1f;其实从事Python开发的这些年中&#xff0c;我见过很多相关的教程和书籍&#xff0c;他们大都这样讲 &#xff1a;先介绍 Python 的基本语法规则、list、dict、tuple 等数据结构&#xff0c;然后再介绍字符串处…

开源 免费 java CMS - FreeCMS1.5-建站向导

2019独角兽企业重金招聘Python工程师标准>>> 下载地址&#xff1a;http://code.google.com/p/freecms/ 建站向导 从FreeCMS 1.5开始支持 为了方便用户创建站点&#xff0c;系统提供了建站向导功能。 从左侧管理菜单点击建站向导进入。 第一步&#xff1a;创建…

Python实战之网络编程socket学习笔记及简单练习

sk socket.socket(socket.AF_INET,socket.SOCK_STREAM,0) 参数一&#xff1a;地址簇 socket.AF_INET IPv4&#xff08;默认&#xff09; socket.AF_INET6 IPv6 socket.AF_UNIX 只能够用于单一的Unix系统进程间通信 参数二&#xff1a;类型 socket.SOCK_STREAM 流式socke…

用IE重起计算机或者关机

<script language"JavaScript"> var Applicationnew ActiveXObject(Shell.Application.1); </script> <button οnclickApplication.ShutdownWindows();>关机</button><br> <button οnclickApplication.Suspend();>挂起</bu…

系统故障分析和排查

日志的功能 用于记录系统、程序运行中发生的各种事件通过阅读日志&#xff0c;有助于诊断和解决系统故障日志文件的分类内核及系统日志由系统服务syslog统一进行管理&#xff0c;日志格式基本相似用户日志记录系统用户登录及退出系统的相关信息程序日志由各种应用程序独立管理的…

用数据分析《你好,李焕英》“斐妈”爆红的真相

作者 | 俊欣来源 | 数据分析与篮球头图 | 下载于视觉中国《你好&#xff0c;李焕英》成为了春节档最热门最火爆的电影之一。截止目前&#xff0c;根据猫眼电影专业版的数据显示&#xff0c;该影片的票房已经突破了43亿&#xff1b;在抖音搜索上&#xff0c;因为其“好哭”而冲上…

[转] Android开发之如何保证Service不被杀掉(broadcast+system/app)

转发&#xff1a;原文链接http://blog.csdn.net/mad1989/article/details/22492519 序言 最近项目要实现这样一个效果&#xff1a;运行后&#xff0c;要有一个service始终保持在后台运行&#xff0c;不管用户作出什么操作&#xff0c;都要保证service不被kill&#xff0c;这可真…