window.opener 子窗体操作父窗体-优快云博客

本文提供了一个父窗体通过按钮打开子窗体，并在子窗体中改变父窗体按钮颜色的例子。使用JavaScript实现跨窗口交互功能，但在Chrome浏览器中可能受限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是看到的一个例子：

1.父窗体main.html：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 2 <HTML> 
 3 <head>
 4     <script type="text/javascript">
 5         function OpenChildWindow () {
 6             window.open ("sub.html", "OpenerTest", "width=300, height=200");
 7             //window.showModalDialog("sub.html", window);
 8         }
 9     </script>
10 </head>
11 <body>
12     <button id="childOpener" onclick="OpenChildWindow();">Open child window!</button>
13     <br /><br />
14 </body>
15 </HTML>

2.子窗体sub.html：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>Modeless window example</title>
 6     <script type="text/javascript">
 7         function ChangeOpener (selectTag) {
 8             //if(window.opener == undefined) {
 9             //    alert("undefined");
10             //}
11             var openerWindow = window.opener;
12             var button = openerWindow.document.getElementById ("childOpener");
13             button.style.color = selectTag.options[selectTag.selectedIndex].text;
14         }
15     </script>
16 <body>
17     Change the color of the button in the opener window:
18     <select onchange="ChangeOpener(this)">
19         <option>black</option>
20         <option>red</option>
21         <option>blue</option>
22         <option>green</option>
23     </select>
24 </body>
25 </html>