监听h5页面显示与隐藏事件

说明:
在最近的项目开发中,需要前端写一个h5页面然后嵌入到java安卓app里面,这里不讲web与Java的通讯,有这么一个需求,定时器定期去调用接口拿数据动态的展示到折线图中,但是呢遇到了这么一个问题,H5进入后台运行导致定时器不能用的问题,这就导致数据不是连续的,想在java那边解决,但是java那边做的是数据库方向的,也不是专业的java安卓开发,就只能自己解决了
于是我就想到前端可以监听页面进入到后台是运行的场景吗?这不就是页面的显示与隐藏,当我们手机把项目切入到后台时,或者息屏时触发相应的事件就好了

visibilitychange事件

是浏览器的新事件方法,主要是用来监听页面是否处于显示状态,现在主流的浏览器都支持此事件,当浏览器进行切换选项卡,最小化,最大化等操作的时候会主动触发该事件。

document.hidden属性

用来表示当前页面是隐藏状态还是激活显示状态,当页面是隐藏非激活状态的时候该值为true,当页面是激活状态的时候该值为false,该属性为只读属性。
我们可以通过上边的visibilitychange事件结合document.hidden做一些效果
其实代码也非常的简单

 // 给document绑定一个visibilitychange事件,当前页面显示或者隐藏的时候执行该事件
    document.addEventListener("visibilitychange", function() {
    
    
      // 判断当前document是显示状态还是隐藏状态
      if(!document.hidden){
    
    
        // 如果是显示状态执行相应的事件
        
      }else{
    
    
        // 如果是隐藏状态执行相应的事件
        
      }
    });

举个例子来说:
假如既有这么一个需求,你在做一个音乐播放器的功能,当页面隐藏时要暂停播放,当页面显示的时候就开始播放,那你用这个事件来岂不是事半功倍。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/pink_cz/article/details/128085941