监听浏览器切屏功能实现

监听浏览器切屏功能实现(一)

docunment中的事件 visibilitychange

visibilitychange事件中有一个visibilityState属性，有两个值，分别是hidden和visible

//浏览器切屏功能实现
let pageSwitchRecord = $ref([]);
function cutScreen() {
    document.addEventListener('visibilitychange', function () {
        // document 身上有一个属性叫作 visibilityState
        // 表示当前页面是显示或者隐藏状态
        if (document.visibilityState === 'hidden') {
            document.title = '用户切屏啦';
            let record = {
                outTime: new Date().getTime(),
                type: 'leave',
            };
            //将当前时间添加到全局的pageSwitchRecord数组中在切屏回来是计算离开时间
            pageSwitchRecord.push(record);
        } else {
            document.title = '用户回来啦';
            let newTime = new Date().getTime();
            alert(`用户在${new Date()}回来了，耗时${((newTime - pageSwitchRecord[0].outTime) / 1000).toFixed(0)}s`);
            pageSwitchRecord = [];
        }
    });
}
cutScreen();

上面所述的方法并不能监听所有浏览器切屏事件,以下2种情况下visibitychange就不能监听到切屏事件。

• 使用ALT+TAB键切换不同的应用时并不会触发上面的方法;
• 开浏览器调试面板后，在调试面板中进行任意操作也不会触发;

监听浏览器切屏功能实现（推荐）

为了解决上面出现的两种监听问题,我们可以通过给window添加两个事件的监听器,当元素失去焦点(blur)或者聚焦(focus)的时候触发,做一些提示信息。

let pageSwitchRecord = $ref([]);
function leave() {
    document.title = '用户切屏啦';
    let record = {
        outTime: new Date().getTime(),
        type: 'leave',
    };
    pageSwitchRecord.push(record);
}

function enter() {
    document.title = '用户回来啦';

    let newTime = new Date().getTime();
    console.log(`用户在${new Date()}回来了，耗时${((newTime - pageSwitchRecord[0].outTime) / 1000).toFixed(0)}s`);
    pageSwitchRecord = [];
}

window.addEventListener('blur', leave);
window.addEventListener('focus', enter);