document.visibilityState 监听浏览器最小化

1.document.hidden:

        表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。

2.document.visibilityState:

        表示下面 4 个可能状态的值

hidden:页面在后台标签页中或者浏览器最小化

visible:页面在前台标签页中

prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true

unloaded:页面正在从内存中卸载

3.Visibilitychange事件:

        当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。

        这样,我们可以监听 Visibilitychange 事件,当该事件触发时,获取 document.hidden 的值,根据该值进行页面一些事件的处理。

document.addEventListener('visibilitychange', ()=> {
    let isHidden = document.hidden;
    if (isHidden) {//切离该页面时执行,逻辑处理
        alert("浏览器处于最小化状态了或者切换到其他页面了");
        document.title = '当焦点不在当前窗口时的网页标题';
    } else {//切换到该页面时执行,逻辑处理
        alert("页面处于当前状态了");
        document.title = '再变回来或者做点其他的';
    }
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值