bug描述：
需求大概是收到 websocket 通知后自動給用戶跳轉(zhuǎn)到下個頁面胸哥， 然后就遇到一個bug: 如果此時瀏覽器是處于后臺掛起的狀態(tài)（比如不在當(dāng)前選項卡材蹬，或者在瀏覽其他的瀏覽器紫岩，亦或者電腦處于休眠狀態(tài)）规惰，那么跳轉(zhuǎn)新的url這個事件就會被瀏覽器給阻止，并且會在控制臺留下一句 log Navigated to <url>... 如下
image.png
解決思路：
知道觸發(fā)的條件后泉蝌，就有了大概的解決思路：websocket 收到跳轉(zhuǎn)通知后通過 document.hidden 判斷當(dāng)前頁面是否處于可見歇万，如果是 false 就正常走跳轉(zhuǎn)的邏輯, 如果是 true ， 那么就先訂閱本次的跳轉(zhuǎn)事件梨与， 等到頁面可見時再去執(zhí)行跳轉(zhuǎn)堕花， 此時對用戶而言， 效果是一樣的粥鞋。
代碼
因為大家的項目不同，使用場景也不一致瞄崇， 以下是根據(jù)實現(xiàn)解決思路的代碼呻粹，希望對遇到相同問題的各位有幫助
// 給window添加監(jiān)聽
window.addEventListener('visibilitychange', handleToggleVisible)
// 跳轉(zhuǎn)代碼邏輯如下
var url = ''
if (document.hidden) {
// 訂閱， 如果是多個函數(shù)需要處理苏研，那么這里可以存一個函數(shù)數(shù)組
url = 'www.xxx.com'
} else {
location.href = 'www.xxx.com'
}
funtion handleToggleVisible () {
if (document.visibilityState === 'hidden') {
// out tab, do something...
} else {
if (url ) {
// 發(fā)布等浊， 如果訂閱是多個函數(shù)，此時可以循環(huán)執(zhí)行
window.location.href = url
}
}
}
