bug描述:
需求大概是收到 websocket
通知后自动给用户跳转到下个页面, 然后就遇到一个bug: 如果此时浏览器是处于后台挂起的状态(比如不在当前选项卡,或者在浏览其他的浏览器,亦或者电脑处于休眠状态),那么跳转新的url这个事件就会被浏览器给阻止,并且会在控制台留下一句 log Navigated to <url>...
如下
解决思路:
知道触发的条件后,就有了大概的解决思路: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
}
}
}