Frame的应用

原创 2007年09月23日 13:05:00
 

HTML Tags and JavaScript tutorial



Frame的应用





Frame
的应用
 
框架相当于
<body>
,所以一个存在框架的
html
文件是不存在
body
的。
框架的作用就是划分屏幕,使界面尽可能少地实现刷新。最基本的应用就是菜单

内容界面。
1、
 
框架的创建
<frameSet rows=”20%,*” id=”frameset_id”>
<frame name=”1” src=1.htm>
<frameSet name=”2” cols=”*,3*”>
   
<frame name=”2-1” src=2_1.htm>
   
<frame name=”2-2” src=2_2.htm>
</frameSet>
</frameSet>
      
注:
1
)框架可以嵌套;
2
)框架划分可采用百分之、比例、像素为单位。
Cols=”*,3*”
就是把屏幕划分成四等分。
2、
 
框架的格式
框架分割处有一条线?
<frameSet frameborder=0>
消除之(或
<frame frameBorder=0
)。
不对呀,颜色还是有问题?
<frameSet frameborder=0 frameSpacing=0>
不想让用户调节调架大小?
noResize
就行了。
想让框架分割线具有颜色?
borderColor
就行了。
想要卷滚条?
scrolling=yes/no/auto

3、
 
如何从一个框架修改另一框架?
很简单,例如
<a href=”b.htm” target=1>XXX</a>
就是在框架
1
中显示
b.htm
的内容。
当然也,也可以直接调用:如在
javaScript
中调用:
frameset_id.1.location.href=”b.htm”

以下是四种比较特殊的方法:
<a href=url target=_blank>
新窗口中打开,相当于
window.open

<a href=url target=_self>
本窗口打开,相当于
window.location.href

<a href=url target=_parent>
父窗口打开,相当于
parent.location.href

<a href=url target=_top>
整个浏览器窗口打开。
4、
 
浮动窗口
iframe

frame
差不多用法。
例如:

IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left

slafjsalgjakg;al
</iframe>
可以试试。
5、
 
编程操作
frame
既可以通过名称来调用,也可以通过索引号来调用。如:
下面举例说明,假设一个
FRAMESET
包含
3
个同样的
FRAME
,都位于窗口下部:
 
 

FRAMESET rows="60%,40%"



FRAME name="link" src="link.htm"



FRAMESET cols="*,*,*"


 

FRAME name="blank1" src="blank.htm"


 

FRAME name="blank2" src="blank.htm"


 

FRAME name="blank3" src="blank.htm"



/FRAMESET



/FRAMESET

 
  第一个
FRAME
中的文档叫做
link.htm
,使用点击其中的单一链接就可以修改其他三个
FRAME
中的内容。实现代码如下
:
 

a href="javascript:navAll()"
>修改下面
3

FRAME
的内容<
/a



SCRIPT language="javascript"
><
!--
function navAll() {
parent.FRAMEs[1].location.href="red.htm";
parent.FRAMEs[2].location.href="blue.htm";
parent.FRAMEs[3].location.href="white.htm"; }
// --
><
/SCRIPT

 
以下来自某个网站。
用脚本控制动态
FRAME
 
 
  如果
FRAME
中变化的内容不多,就可以考虑使用脚本程序动态生成其内容。这样就不用再创建单独的小
HTML
页面,无需从服务器上下载。创建内容的方法与在任何窗口中书写内容一样,都是通过
document
对象。
 
 
  举个例子说明一下。假设要在一个
FRAME
内显示小组成员的相片,并在其下的一个小
FRAME
内显示该成员的名字等信息。首先建立信息数组:
 
 
empID = new Array();
empID[0] = 'Dana Corolla, CEO';
empID[1] = 'Arturo Montero, senior editor';
empID[2] = 'Percy Tercel, head designer';
empID[3] = 'Angus Coupedeville, astrologer';
 
 
 
  然后,建立小组成员照片的图形地图,将每个<
AREA
>链接到函数
showMe(n)
,由它负责根据索引数据创建信息:
 
 
part1 = '

HTML
><
HEAD
><
/HEAD

';
part1+= '

BODY bgcolor=#ffffff
><
DIV align=center

';
part2 = '

/DIV
><
/BODY
><
/HTML

';
 
 
function showMe(n) {
parent.FRAMEs[1].document.open();
parent.FRAMEs[1].document.write(part1);
parent.FRAMEs[1].document.write(empID[n]);
parent.FRAMEs[1].document.writeln(part2);
parent.FRAMEs[1].close();
}
 
 
  
FRAME
间的脚本控制
 
 
  使用
javascript
,我们既可以从创建窗口的页面访问那个窗口,也可以从这个窗口创建的窗口访问它。另一方面,
FRAMESET
中的文档(包括
FRAMESET
本身)总是可以访问和操纵其中每个的
javascript
函数和变量。比如说,第三个
FRAME
中有函数
sayGobble(vol)
,那么在其他
FRAME
中就可以使用
parent.FRAMEs[2].sayGobble(vol)
来引用它。同样,
FRAMESET
页面中的变量
myName
可以被任何
FRAME

parent.myName="Imelda"
的命令进行设置。
 
 
  不管在其他
FRAME
中的内容如何,在静态
FRAME
或者
FRAMESET
中的函数和变量始终保持可用。这个特征非常有价值,不仅可以将通用函数保存在其中从而压缩代码,而且,还可以实现页面间转换时的状态保持。
 
 
  下面的
FRAMESET
页面只有一个
FRAME
叫做
query.htm
,并且定义了一个
javascript
变量
myWord

 
 

HTML
><
HEAD



TITLE

Passing data

/TITLE



SCRIPT LANGUAGE="javascript"
><
!--
myWord="";
//--
><
/SCRIPT



/HEAD



FRAMESET rows="*,1" FRAMEBORDER=no



FRAME name="active" src="query.htm"



FRAME name="dummy"



/FRAMESET



/HTML

  
 
 
  页面
query.htm
有一个文本输入框以及一个到
result.htm
的链接,链接的
onClick
事件将设置
FRAMESET
页面的
myWord
变量为文本输入框的内容。代码如下:
 
 

HTML
><
HEAD
><
/HEAD



BODY



FORM name="myForm"



INPUT type=text size=12 name="myText"



P



A onClick="parent.myWord=myText.value"
href="result.htm"

See it in yellow on blue!

/A



/FORM



/BODY
><
/HTML

 
 
 
  页面
result.htm
取回并打印出
myWord
的数值,代码是:
 
 

HTML



HEAD
><
/HEAD



BODY bgcolor=#0000cc vlink=#99ffff



FONT size=+3 color=#ffff00



SCRIPT language="javascript"
><
!--
document.write(parent.myWord);
//--
><
/SCRIPT



/FONT
><
P



A href="query.htm"

Do it again

/a



/BODY
><
/HTML

 
 
 
 
 
  这个例子很有实用价值。比如说,你可以设定访问者按一定的次序打开页面,收集用户信息,最后定制出用户特制的显示内容。
 
 
  谈到状态维护功能,这个方法不会比使用
cookie

CGI
更好,因为当
FRAMESET
重载或者退出时,变量值就丢失了。但是,它不要求服务器端响应,也不存在安全问题,因此还是可以小试一把的。

 
  用脚本控制浮动
FRAME
 
 
  用脚本控制普通
FRAME
与浮动
FRAME
的方法基本相同,唯一的差别是浮动
FRAME
按<
IFRAME
>出现的顺序定义索引位置。如果
FRAMEs.length
不为
0
,就表示可以安全地处理浮动
FRAME
。比如说,在下面的代码中,如果存在叫做
floater
的浮动
FRAME
,链接就指向它;否则就指向
"_top"

 
 

IFRAME name="floater" src="trog.htm" width=200 height=200
><
/IFRAME

 
 

A href="grot.html" target="floater" onClick="if (!self.FRAMEs.length)
 
this.target='_top'"

See grot.htm

/A

 
 
 
  带有浮动
FRAME

Web
页面是
FRAME
文档的
parent
窗口,因此,多个浮动
FRAME
仍然可以通过
parent.FRAME
数组去访问每一个
FRAME


 
  预防脚本编程错误
 
 
  尽管
FRAME

HTML
的一个稳定规范说明,但
DOM
模型只把它们当做
HTML
元素而不是窗口,因此围绕
FRAME
的脚本编程并不是能很周全地定义。这个不足导致了当装载
FRAME
时会发生一些脚本执行方面的冲突。
 
 
  立即修改
FRAME
内容的脚本经常会产生错误。原因在于:浏览器通常是先执行脚本命令,然后在按照
src
所示装入页面内容。
 
 
  解决方法很直接,就是判断
FRAME
内容是否装载完毕。有一个好的处理技巧是以
HTML
页面开始所有的
FRAME
,由它象主
FRAMESET
报告装载请看。比如说,有一个
FRAMESET
页面,要等装载完所有的
FRAME
后才能执行函数
goToIt()
,那么就将下面的
javascript
程序段放进
FRAMESET
文档中:
 
 
countDown=FRAMEs.length;
function soundOff() {
countDown--;
if (countDown==0) {
 
goToIt();
 
}
}
 
 
 
  然后,在每个
FRAME
页面的<
BODY
>标记中设置上
onLoad="parent.soundOff()"
。当
FRAME
页面装载并执行
soundOFF()
后,等到
countDown

0
时,就表示
FRAME
完全装载完毕。
 


HTML<frame>标签的使用

frameset中可以设置框架样式。如果需要一个页面跳转到另一个页面那么建议使用标签的target属性,target属性值等于要跳转的frame框架页的name。...
  • z514700548
  • z514700548
  • 2016年11月07日 10:22
  • 1514

(0002) H5开发之Frame框架理解

首页index.jsp代码如下所示 [html] view plain copy print? html>  head>      title>管理系统title>  head>  ...
  • shifang07
  • shifang07
  • 2017年06月02日 11:05
  • 612

frame框架的应用

aspx:http://www.w3.org/1999/xhtml" >    系统                                                     sr...
  • F2164529
  • F2164529
  • 2011年07月18日 14:21
  • 389

frame和iframe的使用与总结

js 操作frameset frame 对象 框架编程概述 一个HTML页面可以有一个或多个子框架,这些子框架以来标记,用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架...
  • klicky
  • klicky
  • 2014年10月15日 10:29
  • 9507

3.leapmotion之应用程序

应用程序开发 使用LeapJS和其他一般应用程序开发主题设置项目: 1.SDK库 Leap Motion SDK包含两个基本库,用于定义Leap Motion跟踪数据的API。 一个库用C ...
  • baidu_36059497
  • baidu_36059497
  • 2016年12月13日 22:22
  • 315

在Frame画图应用

实现代码: import java.awt.*; import java.awt.event.*; public class DrawImage extends Frame { Ima...
  • yabg_zhi_xiang
  • yabg_zhi_xiang
  • 2016年04月02日 08:57
  • 160

HTML中<a>标签的target属性--在使用frame框架做网页时可用到

定义和用法 标签的 target 属性规定在何处打开链接文档。 如果在一个 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻...
  • jiangqin115
  • jiangqin115
  • 2015年10月13日 12:16
  • 1385

fram的使用(frameset标签、frame标签、iframe标签)

frame,是网页开发必须掌握的知识。例如后台架构、局部刷新,页面分割,都是frame的用途表现,尤其是后台页面制作,使用frame会给用户带来非常舒适的使用感受。 frame知识点包括(frames...
  • u013531928
  • u013531928
  • 2015年08月13日 15:31
  • 2353

(总结)Java图形界面编程知识点汇总(待补充)

Java图形界面编程知识点汇总 一:基本概念: @.AWT(Abstract Window Toolkit):     抽象窗口工具包,SUN 公司提供的用于图形界面编程(GUI)的类库。AWT...
  • LYXAICLR
  • LYXAICLR
  • 2012年04月11日 11:43
  • 9125

Python-Tkinter教程之Frame篇

__author__ = 'xianhua.meng' # encoding: utf-8 #!/usr/bin/python '''Tkinter教程之Frame篇''' #Frame就是屏幕上的...
  • mengxianhua
  • mengxianhua
  • 2014年10月28日 10:15
  • 23357
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Frame的应用
举报原因:
原因补充:

(最多只允许输入30个字)