`

iframe,frame,frameset区别

 
阅读更多


在html文件引入其它html文件的几种方法
1.IFrame引入,看看下面的代码
[代码] <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>
2.<object>方式
[代码] <object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

 

iframe 是在html页面内嵌入框架 框架内可以连接另一个页面,

<html>
<head></head>
<body>
<iframe src="xxx.html"></iframe>
</body>
</html>

frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
<html>
<head></head>
<frameset>
<frame src=""></frame>
<frame src=""></frame>
</frameset>
</html>

 

 

 

frameset        它称为框架标记,是用来告知HTML文件是框架模式,并且设定可视窗口怎么分割
fram               它只是设定某一个框架窗口中的参数属性
iframe            它是在一个页面中嵌入一个框架窗口

 

frameset的属性

1、cols                     它是把整个画面竖向分割成几个画面
2、rows                   它是把整个画面横向分割成几个画面
3、frameborder       它表示设定这个框架的边框值。它的值只有两个0或者1.0表示不显示边框,1表示显示边框。
4、border                它表示了边框的宽度
5、bordercolor         它是设定了框架边框的颜色

 

 

frame的属性

1、src              指在此框架窗口中要显示的网页档案的链接
2、name             指这个框架窗口的名称
3、framespacing     指框架和框架之间保留的空白的距离
4、scrlling         指该框架窗口是否要显示滚动条
6、noresize         指框架的尺寸不能被随意拖动,改变大小 
7、marginheight      指框架顶部和底部边缘所保留的空间的大小
8、marginwidth      指框架左右两边边缘所保留的空间的大小。

frameset和frame标签必须在一起使用

 

frame有一个重要的值是target,它表示在指定的框架中打开网页

而target有四个值

1、blank                它表示在一个新的窗口中打开链接网页

2、top                   它表示在本窗口中打开链接网页

3、parent              在上一层的框架中打开链接网页

4、self                   在超链接中打开链接网页

target是在编写导航时肯定会用到的

 

noframes              指当浏览器完全显示不出这个框架时,页面就会显示出<noframes></noframes>内的内容。

 

 

iframe的属性

1、name                  是框架窗口的名称
2、align                   是框架窗口中内容的对其方式
3、width                  是框架窗口的宽,单位是pixels
 4、height               是框架窗口的长,单位是pixels
 5、marginwidth      是插入的文件和框架左右边缘所保留的空间
6、marginheight     是插入的文件和框架上下边缘所保留的空间
7、frameborder      是指是否显示边框。1表示显示边框,0表示不显示边框
8、scrolling             是指是否允许使用滚动条。

 

利用frameset和frame可以把网页制作成所需要的不同大小的框架,可以用来布局。

iframe则是把一些网页嵌入到当前网页中,达到所需要的效果。

 

 


■ 框架概念 :
所谓框架便是网页画面分成几个框窗,同时取得多个 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 则不容许卷动

 

frame和iframe的区别

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中测试。

分享到:
评论

相关推荐

    frame,iframe.frameset用法和区别

    frame,iframe.frameset用法和区别

    frame,iframe,frameset用法和区别

    frame,iframe,frameset用法和区别

    frame,iframe,frameset区别pdf

    本文档适合web开发初级者阅读,讲述了常用的frame,iframe,frameset区别和用法,如果你对这些都还不是很清楚,阅读本文档可能对你有用

    frameset/frame/iframe实例演示

    里面包含了frameset,frame以及iframe的一些技术的演练,希望对大家有帮助,如果有什么补充或疑问,可以加QQ374053115进行和我讨论交流,互相进步!里面代码均手写,大致功能都已经实现,如果错误欢迎指出!

    frame frameset左右收缩

    frame frameset左右收缩 iframe左右收缩

    js 操作 frameset frame iframe对象

    js 操作 frameset frame iframe对象

    html Frame、Iframe、Frameset 的区别

    10.4.1 Frameset与Frame的区别首先讲解Frameset与Frame之间的区别。 &lt;Frameset&gt;&lt;/Frameset&gt;用来划分框架,每一个框架由&lt;Frame&gt;&lt;/Frame&gt;标记。&lt;Frame&gt;&lt;/Frame&gt;必须在&lt;...

    Iframe FrameSet top 内嵌示例

    页面框架内嵌示例,通过IFRAME与FRAMESET内嵌后不会出现滚动条的问题,以及top跳出框架的问题

    对frameset、frame、iframe的js操作.pdf

    对frameset、frame、iframe的js操作.pdf

    多个iframe,显示其中一个frame中的div,并处于最上层显示

    多个iframe,显示其中一个frame中的div,并处于最上层显示 并且页面中的填写的值,可以传到弹出的div页面中 最近一段时间在做这个东西,给大家分享一下 附带测试代码 js弹出div层

    举例讲解HTML中iframe和frame的区别

    frame这个标签不知大家注意过没有,它必须放在frameset中使用,而且经常容易和iframe混淆,这里我们就来举例讲解HTML中iframe和frame的区别,需要的朋友可以参考下

    对frameset、frame、iframe的js操作示例代码

    父框架到子框架的引用、子框架到父框架的引用、兄弟框架间的引用、不同层次框架间的互相引用具体实现如下,有此需求的朋友可以参考下

    iframe的实例(详细代码及注释)

    简单明了的实例,代码注释齐全,下载后可以直接使用,对frame,frameset及iframe的使用能够完美的掌握

    frameset 框架的用法

    FRAMESET&gt; &lt;FRAME&gt; &lt;NOFRAMES&gt; &lt;IFRAME&gt; 欲明白本篇【HTML剖析】之标记分类请看 【标记一览】。 亦请先明白围堵标记与空标记的分别请看 【HTML概念】。

    深入剖析HTML5 内联框架iFrame

    由于现在frame和frameset很少使用,已经过时了,已经被div+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame 所谓的iFrame内联框架,我的理解就是在网页内部嵌套一个网页,并且可以一级一级地...

    JS获取并操作iframe中元素的方法

    JS获取/设置iframe内对象元素、文档的几种方法...以上方法,不仅对iframe适用,对frameset里的frame也同样适用。IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的。比如这个,它在同样支持下面的标准路

    用JS操作FRAME中的IFRAME及其内容的实现代码

    问:想通过在地址栏输入一段JS来设置一下页面里某个FRAME中的IFRAME的URL和里面某个TEXT的值,然后点击提交按钮。注意:页面是其它网站的,不要给出一些改动页面代码的答案。具体情况如下: 主页面.htm: view ...

    一个简单的网页框架 frame

    一个简单的网页框架,用于学习Frame 源码如下: &lt;html&gt; &lt;head&gt; &lt;script language='javascript'&gt; if(window.opener==null) { window.opener=null; window.close(); window.open('index.html','','toolbar=no,...

Global site tag (gtag.js) - Google Analytics