前端监听浏览器切屏次数

visibilityState简介

• visibilitychange是HTML5新提供的一个API，作用是记录当前标签页在浏览器中的激活状态，即是否正在被用户浏览。浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。
• document.visibilityState 返回document的可见性。有以下3个值：
  • visible：页面内容可见
  • hidden：页面内容不可见
  • prerender：页面正在渲染中

示例代码（vue2）

需求描述：考试页面，用户切出当前页面5秒记为一次切屏。超过三次警告用户或直接交卷。

定义所需的数据

data() {
    return {
      leaveTime: '', // 离开页面时间点
      backTime: '', // 回到页面时间点
      count: 0, // 切屏次数
    }
}

监听页面的可见性，页面可见性发生变化时，触发pageMonitor方法。

mounted() {
    window.addEventListener("visibilitychange", this.pageMonitor)
}

methods: {
    pageMonitor() {
        if (document.visibilityState === 'hidden') {
        // 用户离开了当前页面
        this.leaveTime = new Date().getTime()
      } else if (document.visibilityState === 'visible') {
        // 用户回到当前页面
        this.backTime = new Date().getTime()
        // 切屏时间大于5秒记为一次切屏
        if (this.leaveTime && this.backTime - this.leaveTime > 5 * 1000) {
            this.count++
        }
        if (this.count > 3) {
          // 提醒用户已经切屏3次，或者直接交卷
        }
      }
    }
}

关闭当前页面时记得销毁监听事件

beforeDestroy() {
    window.removeEventListener('visibilitychange', this.pageMonitor)
}