首页 > 知识•资讯 > javascript:visibilitychange事件:监听页面可见性 > 正文

javascript:visibilitychange事件:监听页面可见性

2022/1/7 15:45:54 · 稿源:传诚信

页面可见性是什么?

页面可见性api的作用是通过监听documentvisibilitychange事件记录当前标签页在浏览器中的激活状态。所谓“激活状态”指当前标签是否正在被用户浏览。

简单的说,就是 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件

用它有什么好处?

我们可以利用这个api在特定的时候避免执行一些不必要的操作,页面不可见时,暂停播放流媒体文件、停止一些不必要的轮询,以减少客户端、服务端压力,对于节省资源和提高性能特别有用。

有哪些使用场景?

1、当前页面不可见时,暂停播放视频或者音乐,当页面恢复可见,继续之前播放。

2、实时轮询的榜单页面,当页面不可见时,暂停轮询。

3、网页轮播图,只有在用户观看轮播时,才自动切换到下一张。

4、在客户端内,一个文章列表页,点击文章打开新的webview或者客户端页面浏览或评论,返回上一页时,列表中该文章数据更新。

5、点击支付跳转到新开页面,再返回这个页面时弹出支付状态相关提示弹窗。

浏览器兼容性

既然这么有用,肯定要看一下兼容性,能否用在项目中,下图是截止2019年10月30日的兼容性图表,也可点击 can i use 网站查看兼容性。

移动端可以放心大胆地使用。

该API的属性和事件

属性

1、document.hidden

布尔值,表示标签页的显示或隐藏。

2、document.visibilityState

相对详细一些,目前有四个可能的值:

  • visible:页面部分内容可见。意味着该标签页是一个非最小化的可见标签页,可能被别的页面覆盖了一部分。

  • hidden:页面内容对用户不可见。 在实际中,这意味着文档可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下。

  • prerender:页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender,但绝不会从其它值转为该值。 注释:浏览器支持是可选的。

  • unloaded:页面正在从内存中卸载。 注释:浏览器支持是可选的。

注意:prerenderunloaded在chrome中测试不出来触发场景,个人猜测并没有支持这两个值。MDN网站只有中文版有介绍这两个属性值,英文版只有prerender,且不建议使用。点击进入MDN

事件

visibilitychange:当浏览器可见性发生变化的时候,这个事件会被触发。

我们可以在document对象上注册一个监听visibilitychange事件,根据document.hidden或者document.visibilityState属性做一些业务逻辑。

注意:visibilitychangedocument的事件,路由之间的跳转,不会改变当前页面的可见性,页面之间的跳转更不会触发该事件。

示例场景

客户端内嵌H5页面经常遇到的一个场景:H5页面有一个视频,正在播放时,点击页面其他按钮,进入客户端原生页面,或者打开一个新的webview,这时视频应该暂停播放,返回该页面时,视频继续播放。

这种情况实现方法不止一个,我们这里使用这次的主角visibilitychange来实现。

1、先封装一下visibilitychange事件

tools.js代码:

varvar handleShow, handleHide,handleRemove, state_name;
/**
 * 监听visibilitychange
 * @param  {object} options 可见与不可见的回调函数
 * 
 */
export function onBrowserChange(options) {
  handleShow = options.handleShow,
  handleHide = options.handleHide;
  if (document.visibilityState || document.webkitVisibilityState) {
    var prefix = document.visibilityState && '' || document.webkitVisibilityState && 'webkit' || '';
    var event_name = prefix + 'visibilitychange';
    state_name = prefix ? prefix + 'VisibilityState' : 'visibilityState';
    document.addEventListener(event_name, BrowserChangeEvent);
  }
}
/**
 * 具体的事件处理函数 
 * removeEventListener()不能移除匿名函数,我们把函数单独提出来
 * @param  无
 * 
 */
function BrowserChangeEvent() {
  var state = document[state_name];
  if (state === 'visible' && typeof handleShow === 'function') {
    handleShow();
  } else if (state === 'hidden' && typeof handleHide === 'function') {
    handleHide();
  }
}
/**
 * 移除监听visibilitychange事件
 * @param  {object} options 移除前的回调函数
 * 
 */
export function removeBrowserChange(options) {
  handleRemove = options.handleRemove;
  if (document.visibilityState || document.webkitVisibilityState) {
    var prefix = document.visibilityState && '' || document.webkitVisibilityState && 'webkit' || '';
    var event_name = prefix + 'visibilitychange';
    state_name = prefix ? prefix + 'VisibilityState' : 'visibilityState';
    if (document[state_name] === 'visible' && typeof handleRemove === 'function') {
      handleRemove();
    }
    document.removeEventListener(event_name, BrowserChangeEvent, false);
    handleShow = null;
    handleHide = null;
    handleRemove =null;
  }
}
<
 


  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

全国免费咨询热线

400-697-8610