美文网首页让前端飞Web前端之路
监听页面是否可见的事件visibilitychange

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

作者: Mr无愧于心 | 来源:发表于2020-03-31 16:36 被阅读0次
    有这样场景:
    1. 一个浏览器打开多个tab页,当前页被浏览或切换到其他页就会触发visibilitychange事件。
    2. app中打开一个H5,H5跳到帖子页,或者从帖子页跳回到H5就会visibilitychange事件。
    3. 当设备进入待机模式时,网站想要关闭设备声音,可以使用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变化 重新请求数据,达到数据更新的效果
    

    相关文章

      网友评论

        本文标题:监听页面是否可见的事件visibilitychange

        本文链接:https://www.haomeiwen.com/subject/npzwuhtx.html