基于web API之Page Visibility API的监听页面是否可见

代码示例

class PageVisibility {
      constructor({ callback }) {
        this.callback = callback;
        this.init();
      }

      init() {
        const visibilityAPI = {
          hidden: "",
          visibilityChange: "",
        };

        if (typeof document.hidden !== "undefined") {
          visibilityAPI.hidden = "hidden";
          visibilityAPI.visibilityChange = "visibilitychange";
        } else if (typeof document.msHidden !== "undefined") {
          visibilityAPI.hidden = "msHidden";
          visibilityAPI.visibilityChange = "msvisibilitychange";
        } else if (typeof document.webkitHidden !== "undefined") {
          visibilityAPI.hidden = "webkitHidden";
          visibilityAPI.visibilityChange = "webkitvisibilitychange";
        }

        document.addEventListener(visibilityAPI.visibilityChange, () => {
          if (document[visibilityAPI.hidden]) {
            this.callback({ status: true });
          } else {
            this.callback({ status: false });
          }
        });
      }
    }

    new PageVisibility({
      callback: (res) => {
        if (res.status) {
          console.log("页面不可见");
        } else {
          console.log("页面可见");
        }
      },
    });

Page Visibility API