js操作原生

js是否可以监听浏览器聚焦失焦？
比如：我在浏览着页面，突然去打开微信或者打开不属于浏览器的软件或者返回桌面，这时需要触发一个事件？
document.hidden属性是实现不了的

阅读 2.3k

试下这个例子，我这里测试是可以的
文档

<!DOCTYPE html>
<html>

<head>
  <title>测试监听页面的显示隐藏</title>
</head>

<body>
  <div class="container">
  </div>
  <script>
    /**
     * 监听浏览器标签页的显示与隐藏
     */
    class ListenerPageVisibility {
      constructor() {
        // 设置隐藏属性和改变可见属性的事件的名称
        this.hidden = ''
        this.visibilityChange = ''
        if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
          this.hidden = "hidden"
          this.visibilityChange = "visibilitychange"
        } else if (typeof document.msHidden !== "undefined") {
          this.hidden = "msHidden"
          this.visibilityChange = "msvisibilitychange"
        } else if (typeof document.webkitHidden !== "undefined") {
          this.hidden = "webkitHidden"
          this.visibilityChange = "webkitvisibilitychange"
        }

        this.handleChange = (callBackHidden, callBackVisibility) => {
          if (document[this.hidden]) {
            // 页面是隐藏状态
            callBackHidden && callBackHidden()
          } else {
            // 页面是展示状态
            callBackVisibility && callBackVisibility()
          }
        }

      }

      /**
       * 全局访问点
       * @param callBackHidden 页面隐藏执行的回调方法
       * @param callBackVisibility 页面显示执行的回调方法
       */
      linsternVisibility(callBackHidden, callBackVisibility) {
        // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
        if (typeof document.addEventListener === "undefined" || typeof document[this.hidden] === "undefined") {
          console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.")
        } else {
          // 处理页面可见属性的改变
          document.addEventListener(this.visibilityChange, () => {
            this.handleChange(callBackHidden, callBackVisibility)
          }, false)
        }
      }
    }

    // 调用实例
    let navChange = new ListenerPageVisibility()
    navChange.linsternVisibility(
      // 页面是隐藏状态执行方法
      () => {
        console.log("页面隐藏")
        // TODO 浏览器标签页处于隐藏状态时,执行的方法
      },
      // 页面是可见状态执行方法
      () => {
        console.log("页面显示")
        // TODO 浏览器标签页处于显示状态时,执行的方法
      }
    )
  </script>
</body>

</html>

js操作原生

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？