控制按钮只打开一个子页面(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){
             
            }        
    } 

 

posted @ 2021-12-28 15:00  天為  阅读(2025)  评论(0编辑  收藏  举报