js实现监听浏览器关闭和刷新事件-检测视频播放时间并提交给后台程序

---

监听浏览器关闭事件，实现在刷新时或者浏览器关闭前我们可以写一些业务逻辑

需求1：H5游戏，在用户切换了标签页，（游戏界面处于非当前页面）暂停游戏

需求2：在线教学视频，在用户切换了标签页或者关闭浏览器后，暂停视频播放，并及时记录观看时间，发送到后台程序

实现：

主要是利用两个API: document.onvisibilitychange  和  window.onbeforeunload

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了，例如Chrome, Firefox, IE10等。在google浏览器中测试，关闭浏览器也可以触发这个事件

visibilitychange兼容性：（仅参考）

 

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。

所以这事件中我们不需要写返回值，写了返回值后会弹出我们控制不了的提示信息

 

vue中要写到mounted里面

mounted() {
    let _this = this;
    if (typeof document.addEventListener === "undefined") {
      console.error("浏览器不支持addEventListener,请升级");
    } else {
      document.addEventListener("visibilitychange", () => {
        if (document.visibilityState == "hidden") {
          _this.sendCurVideoTime(localStorage.getItem("webviewDuration"));
        }
      });
      window.addEventListener("beforeunload", () => {
         this.sendCurVideoTime(localStorage.getItem("webviewDuration"));
      });
    }
  },

 

另外发现vue中函数：beforeDestroy 可以监测到浏览器关闭事件，但不能监测刷新事件

---