监听页面是否可见的事件visibilitychange

有这样场景：

一个浏览器打开多个tab页，当前页被浏览或切换到其他页就会触发visibilitychange事件。

app中打开一个H5，H5跳到帖子页，或者从帖子页跳回到H5就会visibilitychange事件。

当设备进入待机模式时，网站想要关闭设备声音,可以使用visibilitychange事件。

主要涉及到了当前的页面是否正在被用户浏览。

需求，app中的H5跳转到了app的其他操作页，在其他的操作页修改了数据，所以回到h5页面的时候需要重新请求数据，那么就用到了这个函数。

const hiddenProperty = 'hidden' in document ? 'hidden'

: 'webkitHidden' in document ? 'webkitHidden'

: 'mozHidden' in document ? 'mozHidden' : null;

const visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');

//利用VisibilityChange 事件判断页面可见性

document.addEventListener(visibilityChangeEvent, onVisibilityChange);

onVisibilityChange(){

 const hiddenProperty = 'hidden' in document ? 'hidden'

 : 'webkitHidden' in document ? 'webkitHidden'

 : 'mozHidden' in document ? 'mozHidden' : null;

 if (!document[hiddenProperty]) {

   this.refreshData=new Date().getTime();

 }

},

// 如果refreshData变化 重新请求数据，达到数据更新的效果

本文章由javascript技术分享原创和收集