Chrome浏览器中Confirm确认框脚本异常问题求助

这事儿我碰到过！Chrome对后台标签页的原生模态弹窗（比如confirm()）有特殊的行为逻辑——当你打开新标签页后，原标签页切换到后台状态，Chrome会自动将未得到用户交互的confirm弹窗判定为"取消"，导致popupFlag返回false，直接触发else分支里的stopWorker()和doLogout()；而其他浏览器通常会保留弹窗，等待用户切回标签页后再处理，这就是跨浏览器表现不一致的核心原因。

给你几个实用的解决思路：

• 替换原生模态弹窗为自定义非模态UI：自己实现一个基于HTML/CSS的弹窗组件（比如用div模拟弹窗），代替原生的confirm()。这种自定义弹窗不会受Chrome后台标签页规则的影响，用户切回原标签页后依然能正常操作选择。
• 监听标签页可见性状态再执行弹窗逻辑：在调用confirm()之前，先判断当前标签页是否处于活跃状态，避免后台状态下触发弹窗导致误判。示例代码如下：

  // 监听标签页可见性变化
  document.addEventListener('visibilitychange', function() {
    // 只有当标签页回到前台时，才弹出确认框
    if (!document.hidden) {
      const popupFlag = confirm(popupMsg);
      handlePopupAction(popupFlag);
    }
  });
  
  // 统一处理弹窗结果
  function handlePopupAction(flag) {
    if (flag) {
      // console.log(timeDiffFlagSuccess);
    } else {
      stopWorker();
      doLogout();
    }
  }
  

• 调整触发时机到用户主动操作：把需要用户确认的逻辑绑定到用户主动触发的事件上（比如按钮点击），而不是自动执行的脚本中。这样Chrome不会因为标签页切换而自动拦截弹窗，确保交互逻辑由用户主动触发。

内容的提问来源于stack exchange，提问作者shubham