美文网首页
监听网页是否进入后台

监听网页是否进入后台

作者: 芸芸众生ing | 来源:发表于2022-12-21 14:17 被阅读0次
    /** 
  * @param {function} funcShow  // 页面显示 调用的方法 
  * @param {function} funcHide   // 页面隐藏 调用的方法
  */
    function changePageStatus({ funcShow = null, funcHide = null }) {
      let hidden, state, visibilityChange;
      if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
      } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
        state = "mozVisibilityState";
      } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
        state = "msVisibilityState";
      } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
        state = "webkitVisibilityState";
      }

      document.addEventListener(visibilityChange, () => {
        if (document[state] === 'visible') {
          // 页面显示 调用的方法
          typeof funcShow === 'function' && funcShow()
        } else {
          // 页面隐藏 调用的方法
          typeof funcHide === 'function' && funcHide()
        }
      }, false)
    }
    changePageStatus({
      funcShow() {
        console.log('show');
      },
      funcHide() {
        console.log('hide');
      }
    })

相关文章

网友评论

      本文标题:监听网页是否进入后台

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