用javascript實(shí)現(xiàn)始終保持打開同一個(gè)子窗口以及關(guān)閉父窗口同時(shí)自動(dòng)關(guān)閉所有子窗口

2019-11-21 02:03:23

字體：大中小

供稿：網(wǎng)友

今天在網(wǎng)上看到這篇文章，感覺很少會(huì)用到，但畢竟還是有些人需要這樣的功能的，否則就不會(huì)有這篇文章，這篇文章主要是解決以下問題：

1.點(diǎn)擊一個(gè)可以打開新窗體的鏈接，如何實(shí)現(xiàn)如果窗體已打開，則將焦點(diǎn)轉(zhuǎn)到已打開的窗體，否則打開新窗體。難點(diǎn)：如何判斷窗體已打開，及將將打開的窗體Active？   
2.如何實(shí)現(xiàn)一個(gè)主窗體關(guān)閉時(shí)，將所有 打開的其他相關(guān)窗體一起關(guān)閉？  

實(shí)現(xiàn)要點(diǎn)：
1. window.open 會(huì)返回新打開窗口的 window 對(duì)象。
2. 實(shí)現(xiàn)一個(gè)模擬的簡單 HashMap 存儲(chǔ)子窗口的 window 對(duì)象。
3. 每次 open 的時(shí)候，檢索此 HashMap，確定子窗口是否已存在。
4. 若存在則直接切換焦點(diǎn) (window.focus) 。
5. 若不存在，則 open 一個(gè)。
6. 對(duì)于4，有可能子窗口已關(guān)閉，故采取了點(diǎn)技巧，先調(diào)用其 focus （其實(shí)可以任意方法），若出錯(cuò)，則也open 一個(gè)。
7. 關(guān)閉parent 的時(shí)候，遍歷 HashMap，嘗試關(guān)閉所有子窗口。
8. 所有操作在父窗口實(shí)現(xiàn)。
9. 整個(gè)實(shí)現(xiàn)原理其實(shí)很簡單，只要需要熟悉js和dhtml，然后注意細(xì)節(jié)問題處理。

目前 IE 6 sp1 測(cè)試通過，F(xiàn)F 由于不支持 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>     <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> </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需刷新才能執(zhí)行]

打包文件下載

上一篇：非常不錯(cuò)的頁面特效建議大家看下

下一篇：愛戀千雪-US-AscII加密解密工具（網(wǎng)頁加密）下載