JS保持子窗口唯一及父窗口关闭自动关闭子窗口方案

本文介绍如何使用JavaScript实现子窗口的单例模式及父子窗口联动关闭。核心思路是利用window.open返回的窗口对象，通过模拟HashMap存储已打开的子窗口引用。在尝试打开新窗口时，先检查HashMap中是否存在该窗口，若存在则调用focus聚焦，否则执行open。针对窗口可能已被手动关闭的情况，通过捕获focus错误来重新打开。最后，在父窗口关闭时遍历存储的窗口对象并执行close，确保所有相关子窗口同步关闭。

单例子窗口与父窗口联动关闭实现

网络上存在一种需求，即希望保持同一个子窗口始终处于激活状态，并在父窗口关闭时自动关闭所有关联的子窗口。虽然此类场景相对少见，但仍有特定用户群体需要此功能，因此本文旨在解决这一具体问题。

具体实现涉及以下代码逻辑：

首先，需要解决点击链接打开新窗体时，若窗体已存在则将其置于前台，否则打开新窗体的问题。其难点在于如何准确判断窗体是否已打开，以及如何将已存在的窗体设置为活动状态。
其次，需要解决当主窗体关闭时，如何自动关闭所有已打开的相关子窗口的问题。

核心实现要点

实现该功能的关键要点如下：

第一，window.open方法会返回新打开窗口的window对象，这为我们获取窗口引用提供了基础。

第二，需要实现一个简易的HashMap结构，用于存储各个子窗口的window对象引用。

第三，每次执行open操作前，需检索该HashMap，以确定对应的子窗口是否已经存在。

第四，如果检测到子窗口已存在，则直接调用window.focus方法切换至该窗口焦点。

第五，如果HashMap中不存在该子窗口，则执行标准的open操作打开新窗口。

第六，针对第四点的情况，需考虑到子窗口可能已被用户手动关闭。因此采取一种技巧：先尝试调用其focus方法（或任意方法），如果发生错误，则视为窗口已关闭，此时重新执行open操作。

第七，当父窗口关闭时，遍历HashMap中存储的所有子窗口对象，并尝试对每个对象执行close操作，从而关闭所有子窗口。

第八，上述所有逻辑处理均在父窗口中完成。

第九，整个实现原理并不复杂，关键在于熟悉JavaScript和DHTML的相关特性，并妥善处理细节问题。

目前该方案已在IE 6 SP1环境下测试通过。需要注意的是，Firefox浏览器由于不支持window.focus方法，因此不适合使用此方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>Parent window</title>           </head> <body>     <h3>Maintaining the Parent window and Multi Child windows as in WinForm</h3>       <h4>funcions:</h4>       <ol>         <li>Open the same child window once.</li>         <li>Close all the child windows when the parent window is closing.</li>         </ol>     Child window:     <select id="sltWins">         <option selected="selected" value="c1.htm">#1</option>         <option value="c2.htm">#2</option>     </select>          <input id="btnOpen" type="button" value="Open the selected window" onclick="openWin()" /> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

打包文件下载

JavaScript实现单例子窗口管理与父窗口关闭联动

单例子窗口与父窗口联动关闭实现

核心实现要点

实用工具推荐