bug描述：

需求大概是收到 websocket 通知后自动给用户跳转到下个页面， 然后就遇到一个bug: 如果此时浏览器是处于后台挂起的状态（比如不在当前选项卡，或者在浏览其他的浏览器，亦或者电脑处于休眠状态），那么跳转新的url这个事件就会被浏览器给阻止，并且会在控制台留下一句 log Navigated to <url>... 如下

image.png

解决思路：

知道触发的条件后，就有了大概的解决思路：websocket 收到跳转通知后通过 document.hidden 判断当前页面是否处于可见，如果是 false 就正常走跳转的逻辑, 如果是 true ， 那么就先订阅本次的跳转事件， 等到页面可见时再去执行跳转， 此时对用户而言， 效果是一样的。

代码

因为大家的项目不同，使用场景也不一致， 以下是根据实现解决思路的代码，希望对遇到相同问题的各位有帮助

   // 给window添加监听
   window.addEventListener('visibilitychange', handleToggleVisible)
   // 跳转代码逻辑如下
   var url = ''
   if (document.hidden) {
     // 订阅， 如果是多个函数需要处理，那么这里可以存一个函数数组
     url = 'www.xxx.com'
   } else {
     location.href = 'www.xxx.com'
   }

   funtion handleToggleVisible () {
     if (document.visibilityState === 'hidden') {
        // out tab, do something...
      } else {
        if (url ) {
          // 发布， 如果订阅是多个函数，此时可以循环执行
          window.location.href = url 
        }
      }
   }