JS--JavaScript使用window对象操作框架集frameset中的各窗口(frames[])

框架集中的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>