控制按钮只打开一个子页面(window.open 只显示一个页面)
背景:点击父页面中按钮,使用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){ } }