用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口

用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口_javascript技巧

WBOY

发布： 2016-05-16 19:12:51

原创

951 人浏览过

今天在网上看到这篇文章，感觉很少会用到，但毕竟还是有些人需要这样的功能的，否则就不会有这篇文章，这篇文章主要是解决以下问题：

1.点击一个可以打开新窗体的链接，如何实现如果窗体已打开，则将焦点转到已打开的窗体，否则打开新窗体。难点：如何判断窗体已打开，及将将打开的窗体Active？   
2.如何实现一个主窗体关闭时，将所有 打开的其他相关窗体一起关闭？  

实现要点：
1. window.open 会返回新打开窗口的 window 对象。
2. 实现一个模拟的简单 HashMap 存储子窗口的 window 对象。
3. 每次 open 的时候，检索此 HashMap，确定子窗口是否已存在。
4. 若存在则直接切换焦点 (window.focus) 。
5. 若不存在，则 open 一个。
6. 对于4，有可能子窗口已关闭，故采取了点技巧，先调用其 focus （其实可以任意方法），若出错，则也open 一个。
7. 关闭parent 的时候，遍历 HashMap，尝试关闭所有子窗口。
8. 所有操作在父窗口实现。
9. 整个实现原理其实很简单，只要需要熟悉js和dhtml，然后注意细节问题处理。

目前 IE 6 sp1 测试通过，FF 由于不支持 window.focus 故不适合使用。

<title>Parent window</title> 
    <script type="text/javascript">     
    function openWin() { 
        //debugger; 
        var sltWins = document.getElementById("sltWins"); 
        var url = sltWins.value; 
        var winName = url.replace('.', '_'); 
        var win; 
        win = winMap[winName]; 
        try { 
            win.focus();             
        }catch(e) { 
            // alert(e.message); 
            // we need to open a new window when the child window has not  
            // been opened or the child window has been close. 
            // as to the later, you also can implements some method that notices the parent window 
            // to remove the child window from our winMap object when it is closing. 
            // but it's a piece of hard work, i think so, because you must  
            // add the notice codes to all the child windows 
            //              
            win = window.open(url, winName, "top=100,left=100,width=400,height=300");  
            winMap[winName] = win; 
            // 
            if(!win) {  
                alert("Sorry, fail to open the window.Some unexpected error occurs.");  
            } 
            else { 
                    // i try to bind a callback function to the child window's unload event 
                    // unfortunately, it seems not to work. 
//                win.onunload = function() {  
//                    try { 
//                        alert(opener.winMap[winName]); 
//                        opener.winMap[winName] = null;  
//                        alert(opener.winMap[winName]); 
//                    } catch(e) { 
//                        // alert(e.message); 
//                    } 
//                }; 
                win.focus(); 
            } 
        }         
    } 
    </script> 
    <script type="text/javascript"> 
    // stores the opened window object 
    var winMap = new Object(); 
    //winMap["TestedKey"] = "TestedValue"; 
    window.onunload = function() { 
        // try to close all child windows. 
        for(var propName in winMap) { 
            try {                 
                winMap[propName].close();  
            }catch(e) { 
                //alert(e.message); 
            }            
        } 
    } 
    </script> 
 
 
    <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 value="c1.htm">#1</option> 
        <option value="c2.htm">#2</option> 
    </select> 
    
 
    <input id="btnOpen" type="button" value="Open the selected window" onclick="openWin()">

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

打包文件下载