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
}
}
}