许多初学者在处理 frame 时往往会出现这样或那样的错误,其实,frame 是一个特殊的窗口类型,只要明白了他们之间的关系,可以很容易控制,本文摘译自 JavaScript 2.0-The Complete Reference 一书的英文第二版(仅摘录了对理解 frame 有直接关系的章节),文章详细介绍了 frame ,相信对新手理解 frame 会有很大帮助。
对 window 和 frame 关系的错误理解是web开发者中普遍存在的问题,从 (x) html 和 Javascript 来看,每个窗口中显示的 frame 都能很容易的控制,事实上,当一个 window 有多个 frame , 可以通过 window.frames[] 来实现对每个独立的窗口目标的引用,一些简单却很有用的属性在下表中列举出来:
Window 属性说明
frames[] |
存放当前窗口中所有frame对象的数组。 |
length |
窗口 frame 的数目,和 window.frames.length 等同。 |
name |
当前窗口的名字,自 JavaScript 1.1 起,这个值是可读写的。 |
parent |
对父窗口的引用。 |
self |
对窗口自身的引用。 |
top |
对最高级别窗口的引用,这个值通常和parent一致,除非 frame 中有更多的 frame。 |
window |
另外一个对当前窗口的引用。 |
想用 Javascript 控制 frame 最主要的是要把各自的名字和他们之间的关系弄清楚,如果你有一个叫 frames.html 的页面,页面代码如下:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FrameSet Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<frameset rows="33%,*,33%">
<frame src="framerelationship.html" name="frame1" id="frame1" />
<frame src="moreframes.html" name="frame2" id="frame2" />
<frame src="framerelationship.html" name="frame5" id="frame5" />
</frameset>
</html>
在这种情况下,当前文档主体可以看作是三个 frame (frame1,frame2, and frame5) 的 parent ,你可以使用下面的方式取得 frame 数目:
Code:
window.frames.length
你如果在三个子 frame 中运行代码,可以用下面的方法 :
Code:
window.parent.frames.length
或者
Code:
parent.frames.length
parent 表示一个窗体的父窗体,也可以用 top 来表示最高级别的窗体,这样可以写成 top.frames.length ,但是需要注意的是:除非你有嵌套 frame ,否则 parent 和 top 通常表示的是一个对象。
访问一个 frame ,可以用 name 或者下标的方式查询 frames 数组,parent.frames[0].name 将会输出第一个 frame 的名字,在我们的例子中就是 frame1,同样,我们也可以用 parent.frame1 或者 parent.frames["frame1"] 来实现相同的操作,记住,一个 frame 就是一个 window,知道这个,就可以使用所有Window 和 Document 的方法。
当理解了 frame 之间的关系,可以很容易的通过 parent.frames[] 操作任何 frame ,假如你有一个简单的框架页面:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Two Frames</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<frameset cols="300,*">
<frame src="navigation.html" name="frame1" id="frame1" />
<frame src="content.html" name="frame2" id="frame2" />
</frameset>
</html>
在 navigation 窗体里面,你可以通过下面的方式设置一个对 content 窗体引用的变量:
Code:
var contentFrame = parent.frames[1]; // 或者使用名称
iframe 是一个需要注意的 frame 变种,用iframe可以让你不使用框架,但是却可以嵌入页面,问题是,我们如何控制这些 iframe ?事实上,我们也可以用 frames[] 的方法,此外,如果你的 iframe 有命名,可以通过 getElementById 来操控,示例如下:
HTML:
<iframe src="http://www.google.com" name="iframe1" id="iframe1" height="200" width="200"></iframe>
<form action="#" method="get">
<input type="button" value="Load by Frames Array"
onclick="frames['iframe1'].location='http://www.javascriptref.com';" />
<input type="button" value="Load by DOM"
onclick="document.getElementById('iframe1').src='http://www.pint.com';" />
</form>
可以通过在链接标签里面加上 target 来将操作指向目标 frame :
Code:
<a href="http://www.google.com" target="framename">Google</a>
分享到:
相关推荐
功能:frames属性是一个数组,用来存储文档中每一个由元素创建的子窗口(框 架)实例,其中的下标即可以是次序号也可以是用FRAME元素的NAME属性指定的名 称来得到并使用。 12. frames.length属性 语法格式: ...
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self "fullscreen=no,channelmode=no,toolbar=no,location=no,menubar=no,scrollbas=no,resizable=no," 20.状態栏的设置:window.status=...
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大写的JS: document....
12) history属性可看成是代表历史URL的一个特殊数组,它的可读length属性表明数组的长度。支持三种方法back()、forword()、go()。 13) 一个窗口中的任何框架都可以使用属性frames、parent和top引用窗口中的其它框架...
创建一个调整对象 轻松使用调整对象 “调整对象”的内部机制 范围构件 Range Widgets 滚动条构件 Scrollbar Widgets 比例构件 Scale Widgets 创建一个比例构件 函数和信号(至少讲了函数) 常用的范围...
创建一个调整对象 轻松使用调整对象 “调整对象”的内部机制 范围构件 Range Widgets 滚动条构件 Scrollbar Widgets 比例构件 Scale Widgets 创建一个比例构件 函数和信号(至少讲了函数) 常用的范围函数...
ENTER键可以让光标移到下一个输入框 (event.keyCode==13)event.keyCode=9"> 文本框的默认值 (this.defaultValue)"> title换行 obj.title = "123
sdfs " 获得时间所代表的微秒 var n1 = new Date("2004-...
若指定了附加参数,此方法将打开一个窗口,这与 window 对象的 window.open 方法相同。 queryCommandEnabled 返回表明指定命令是否可于给定文档当前状态下使用 execCommand 命令成功执行的 Boolean 值。 ...
10. 某电影中,只有一个layer1,其上放置一个有两个元件(test1 和test2)组合成的组合体, 选择这个组合体执行打散Ctrl+B,然后右键单击执行Distribute to layers,那末: □ A. 这个电影中将增加两个新层:layer2 ...
• 2.10.htm 数组数据类型 • 2.11.htm 字符串型转换为逻辑型数据 • 2.12.htm toLowerCase()方法 • 2.13.htm 通过字符串调用toLowerCase()方法 • 2.14.htm 使用值的数据...
1.本书附源代码共计381个,其运行环境如下: IE 5或更高版本 Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看...