背景:點擊父頁面中按鈕,使用window.open()打開對應按鈕下的子頁面;
問題:同一按鈕點擊多次,會同時打開多個窗口,影響體驗;
期望:同一按鈕點擊多次,只保留一個窗口,自動獲取頁面是否已經被打開。
解決方案一:添加定時setInterval();
根據window.open() 有返回值特性,進行定時檢測;在打開一個窗口(調用window.open)時,對其結果進行判斷,如果狀態為關閉,則執行打開頁面操作;
測試缺陷:對於已經打開窗口進行判斷時,已打開窗口無法保持在最前面;但是可以有效防止頁面被多次打開。
var newWin = window.open(url,name,"height=500,width=1000"); var loop = setInterval(function() { if(newWin &&newWin .closed) { clearInterval(loop); $("body",parent.document).unmask(); } }, 1000);
解決方案二:使用window.onunload 進行監測
采用window.open父頁面/子頁面傳值進行處理;通過監控子頁面關閉事件進行處理(window.onunload())
測試效果可以接受:頁面只打開一個,最初頁面始終保存在最前面;功能正常。
//父頁面: var openWinStatus ='close';//默認狀態為關閉 function openChild(){ if(openWinStatus =='opening'){ return; }else{ openWinStatus ='opening' } window.open(url,name,othersetting); } //子頁面 window.onunload =function(){ try { //父頁面定義 openWinStatus ;修改變量值 window.opener.openWinStatus = 'close'; }catch(e){ } }