函數(shù)window.open實現(xiàn)關(guān)閉所有的子窗口
此文介紹了如何用window.open方法打開一個子窗口,當(dāng)我們要關(guān)閉主窗口時,這時候所有的子窗口也會跟著關(guān)閉。下面有我的實現(xiàn)思路和代碼,分享給大家。
實現(xiàn)思路:
1.打開子窗口函數(shù)window.open(url,winName)的第二個參數(shù)winName可以唯一標識打開的窗口。因此關(guān)閉子窗口只需要使用winName.close()函數(shù)即可。
2.一個頁面可能有多個子窗口。因此需要一個數(shù)組存儲所有子窗口對象。關(guān)閉時,遍歷數(shù)組即可。
3.子窗口還可以再打開子窗口。無限循環(huán)下去。因此需要判斷。
此需求可以通過兩個方法實現(xiàn)。
調(diào)用子窗口的關(guān)閉函數(shù)。
此方法易于理解,但是實際實現(xiàn)過程中發(fā)現(xiàn)瀏覽器的關(guān)閉事件并沒有。且需要是按鈕點擊關(guān)閉還是快捷鍵關(guān)閉,稍微麻煩一些、遞歸關(guān)閉子窗口
此方法實現(xiàn)簡單,缺點就是所有的窗口存儲子窗口的對象數(shù)組需同名
下面是使用遞歸關(guān)閉子窗口及子窗口的子窗口方法
function closeSonWindow(win){ for(var index=0;index<win.length;index++){ //如果窗口已關(guān)閉 if(win[index].closed){ continue; } //如果窗口沒有可以打開的子窗口 if(typeof(win[index].openedWindow)=="undefined"){ win[index].close(); continue; } if(win[index].openedWindow.length==0){ win[index].close(); }else{ closeSonWindow(win[index].openedWindow); win[index].close(); } } }
以上就是本文的全部敘述,希望對大家有所幫助。
相關(guān)文章
深入學(xué)習(xí) JavaScript中的函數(shù)調(diào)用
可能很多人在學(xué)習(xí) JavaScript 過程中碰到過函數(shù)參數(shù)傳遞方式的迷惑,本著深入的精神,我給大家分享了一篇教程關(guān)于javascript中的函數(shù)調(diào)用知識,感興趣的朋友一起學(xué)習(xí)吧2017-03-03uniapp組件傳值的方法(父傳子,子傳父,對象傳值)實戰(zhàn)案例
現(xiàn)在的前端開發(fā)中基本上都是組件化開發(fā)的,下面這篇文章主要給大家介紹了關(guān)于uniapp組件傳值(父傳子,子傳父,對象傳值)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03javascript讀取xml實現(xiàn)javascript分頁
這篇文章主要介紹了javascript讀取xml數(shù)據(jù)對其實現(xiàn)javascript分頁效果,大家參考使用吧2013-12-12JS對象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對象的代碼
這篇文章主要介紹了JS對象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對象的代碼,需要的朋友可以參考下2017-08-08JS中setInterval、setTimeout不能傳遞帶參數(shù)的函數(shù)的解決方案
在JS中無論是setTimeout還是setInterval,在使用函數(shù)名作為調(diào)用句柄時都不能帶參數(shù),而在許多場合必須要帶參數(shù),接下來為大家介紹具體的解決方法2013-04-04JS highcharts實現(xiàn)動態(tài)曲線代碼示例
這篇文章主要介紹了JS highcharts實現(xiàn)動態(tài)曲線代碼示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10echarts圖表無數(shù)據(jù)/空數(shù)據(jù)如何展示"暫無數(shù)據(jù)"
在開發(fā)echarts的時候我們不得不考慮數(shù)據(jù)為空的情況,其實有很多種解決辦法,下面這篇文章主要給大家介紹了關(guān)于echarts圖表無數(shù)據(jù)/空數(shù)據(jù)如何展示“暫無數(shù)據(jù)”的相關(guān)資料,需要的朋友可以參考下2022-10-10