学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记>>

js监听网页的显示与隐藏

发布时间:2021-07-31点击:

    使用JS监听网页的显示与隐藏

    一、document.visibilitychange事件

    使用document.visibilitychange事件可以监听网页document.visibilityState的四种状态:

    • hidden:网页处于背景标签页或者窗口处于最小化状态,或者电脑正处于 '锁屏状态'
    • visible:此页面显示状态,也就是最顶层,并且窗口没有最小化
    • prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true
    • unloaded:页面正在从内存中卸载

    使用方法如下:

    document.addEventListener('visibilitychange', function() {
        var isHidden = document.hidden;
        console.log(document.visibilityState)
        if (isHidden) {
            alert( '隐藏');
        } else {
            alert( '显示');
        }
    });

    如果isHidden为真,那么就表示网页不在最前端显示,可能被浏览器其他页面遮盖了,也有可能最小化了;相反就是在最前端,表示页面正在被显示。

    二、使用onfocus以及onblur事件

    使用onfocus可以监听页面获取焦点事件,你可以放在body中,当页面主体显示时会获得焦点,就会触发该onfocus事件;

    使用onblur可以监听页面失去焦点事件,你可以放在body中,当页面主体不显示时会失去焦点,就会触发该onblur事件;

    使用方法如下:

    <html>
    <head>
    <title>onfocus与onblur</title>
    </head>
    <body onfocus="fc()">
    </body>
    <script>
    function fc(){
       alert('获取焦点啦');
    }
    </script>
    </html>

    PS:这两种方法各有各的缺陷,所以可以互补使用,其中document.visibilityState如果网页在部分可见的情况下也会触发visible项,而onfocus必须点击一次让元素获取焦点,然后响应事件才能生效。所以使用时候请酌情而定。

赞一个(0)     踩一个(0)    

相关链接