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

深碍√TFBOYSˉ_ 2021-08-13 22:19 493阅读 0赞

#### 框架集中的window对象 ####

在HTML文档中，如果页面包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始）从左至右、从上至下访问每个window对象，或者使用使用框架集名称访问每个window对象。每个window对象都有一个name属性，其中包含框架的名称。

在每一个框架中，window对象始终指向的都是那个框架实例，而非最高层的框架：top对象始终指向最高层的框架，也就是浏览器窗口：parent对象始终指向当前框架的上层框架。

在某些情况下：parent可能等于top。例如，在没有框架的情况下，parent等于top。  
使用top或parent可以在一个框架中正确访问另一个框架。例如，可以通过top.window.frames\[0\]引用第一个框架。

**框架之间可以通过window相关属性进行引用，如下表：**

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">top</td> 
   <td align="center">如果当前窗口是框架，它就是对包含这个框架的顶级窗口的window对象的引用。注意，对于嵌套在其他框架中的框架，top未必等于parent</td> 
  </tr> 
  <tr> 
   <td align="center">parent</td> 
   <td align="center">如果当前的窗口是框架，它就是对窗口中包含这个框架的父级框架引用</td> 
  </tr> 
  <tr> 
   <td align="center">window</td> 
   <td align="center">自引用，是对当前window对象的引用，与self属性同义</td> 
  </tr> 
  <tr> 
   <td align="center">self</td> 
   <td align="center">自引用，是对当前window对象的引用，与window属性同义</td> 
  </tr> 
  <tr> 
   <td align="center">frames[]</td> 
   <td align="center">window对象集合，代表窗口中的各个框架（如果存在）</td> 
  </tr> 
  <tr> 
   <td align="center">name</td> 
   <td align="center">窗口的名称。可被HTML标签&lt; a &gt; 的target属性引用</td> 
  </tr> 
  <tr> 
   <td align="center">opener</td> 
   <td align="center">对打开当前窗口的window对象的引用</td> 
  </tr> 
 </tbody> 
</table>

**示例**：下面是一个框架集文档，共包含了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>

显示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

**测试：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/b46608a590a7404fa10056bdd25cbb9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/b2c8ad99a79b4b0d95ac3f582f5ea548.png