前端监听页面显示隐藏 visibilitychange

业务场景

当前页面再次可见时（从其他tab页切换过来或者从其他软件切换过来），重新调用接口获取最新数据。

使用

通过 document.visibilityState 判断页面隐藏还是显示。

document.visibilityState 有两个值：

• hidden 页面从显示到隐藏时的状态
• visible  页面从隐藏到显示时的状态

document.addEventListener("visibilitychange", function() {
    if (document.visibilityState === 'hidden') {
        // 被隐藏了
    } else if (document.visibilityState === 'visible') {
        // 页面显示了
    }
});

为什么不用window.onblur、window.onfocus?

window.onblur和window.onfocus监听的是页面的失焦、聚焦，和我们需求不符合。比如，我在页面和控制台之间来回点击，就会频繁触发这两个事件。而且，从其他页面切到当前页面时，如果不点击一下页面，不会聚焦，也就不会触发window.onfocus事件。

window.addEventListener('blur', () => {
    console.log('blur');
});
window.addEventListener('focus', () => {
    console.log('focus');
});