框架集中的window对象
在HTML文档中,如果页面包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引(从0开始)从左至右、从上至下访问每个window对象,或者使用使用框架集名称访问每个window对象。每个window对象都有一个name属性,其中包含框架的名称。
在每一个框架中,window对象始终指向的都是那个框架实例,而非最高层的框架:top对象始终指向最高层的框架,也就是浏览器窗口:parent对象始终指向当前框架的上层框架。
在某些情况下:parent可能等于top。例如,在没有框架的情况下,parent等于top。
使用top或parent可以在一个框架中正确访问另一个框架。例如,可以通过top.window.frames[0]引用第一个框架。
框架之间可以通过window相关属性进行引用,如下表:
属性 | 说明 |
---|---|
top | 如果当前窗口是框架,它就是对包含这个框架的顶级窗口的window对象的引用。注意,对于嵌套在其他框架中的框架,top未必等于parent |
parent | 如果当前的窗口是框架,它就是对窗口中包含这个框架的父级框架引用 |
window | 自引用,是对当前window对象的引用,与self属性同义 |
self | 自引用,是对当前window对象的引用,与window属性同义 |
frames[] | window对象集合,代表窗口中的各个框架(如果存在) |
name | 窗口的名称。可被HTML标签< a > 的target属性引用 |
opener | 对打开当前窗口的window对象的引用 |
示例:下面是一个框架集文档,共包含了4个框架,设置第一个框架装载文档名为left.html,第二个框架装载文档名为middle.html,第三个框架装载文档名为right.html,第四个框架装载文档名为bottom.html。
left.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
document.body.onclick = f;
}
var f = function(){
parent.frames[2].document.body.style.backgroundColor = "red";
}
function left(){
alert("left");
}
</script>
</head>
<body>
<h1>left.html</h1>
在最高层窗口中访问本框架的方式:
<li>window.frames[0]</li>
<li>window.frames["left"]</li>
<li>top.frames[0]</li>
<li>top.frames["left"]</li>
<li>frames[0]</li>
<li>frames["left"]</li>
单击本页面,让第3个框架窗口(right.html)背景变为红色
</body>
</html>
middle.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
document.body.onclick = f;
}
var f = function(){
parent.frames["left"].left();
}
</script>
</head>
<body>
<h1>middle.html</h1>
在最高层窗口中访问本框架的方式:
<li>window.frames[1]</li>
<li>window.frames["middle"]</li>
<li>top.frames[1]</li>
<li>top.frames["middle"]</li>
<li>frames[1]</li>
<li>frames["middle"]</li>
单击本页面,调用第1个框架窗口(left.html)的函数left()
</body>
</html>
right.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
document.body.onclick = f;
}
var f = function(){
parent.frames[3].document.body.style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<h1>right.html</h1>
在最高层窗口中访问本框架的方式:
<li>window.frames[2]</li>
<li>window.frames["right"]</li>
<li>top.frames[2]</li>
<li>top.frames["right"]</li>
<li>frames[2]</li>
<li>frames["rihgt"]</li>
单击本页面,让第4个框架窗口(bottom.html)背景色为黄色
</body>
</html>
bottom.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
document.body.onclick = f;
}
var f = function(){
parent.frames["middle"].document.body.style.backgroundColor = "blue";
}
</script>
</head>
<body style="text-align: center;">
<h1>bottom.html</h1>
在最高层窗口中访问本框架的方式:
<div>
<li>window.frames[3]</li>
<li>window.frames["bottom"]</li>
<li>top.frames[3]</li>
<li>top.frames["bottom"]</li>
<li>frames[3]</li>
<li>frames["bottom"]</li>
</div>
单击本页面,让第2个框架窗口(middle.html)背景为蓝色
</body>
</html>
主页面index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架集</title>
</head>
<frameset rows="50%,50%" cols="*" frameborder="yes" border="1" framespacing="0">
<frameset rows="*" cols="33%,*,33%" frameborder="yes" border="1" framespacing="0">
<frame src="left.html" name="left" id="left" />
<frame src="middle.html" name="middle" id="middle" />
<frame src="right.html" name="right" id="right" />
</frameset>
<frame src="bottom.html" name="bottom" id="bottom" />
</frameset>
<noframes><body></body></noframes>
</html>
显示效果:
测试: