监听浏览器关闭事件,实现在刷新时或者浏览器关闭前我们可以写一些业务逻辑
需求1:H5游戏,在用户切换了标签页,(游戏界面处于非当前页面)暂停游戏
需求2:在线教学视频,在用户切换了标签页或者关闭浏览器后,暂停视频播放,并及时记录观看时间,发送到后台程序
实现:
主要是利用两个API: document.onvisibilitychange 和 window.onbeforeunload
visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了,例如Chrome, Firefox, IE10等。在google浏览器中测试,关闭浏览器也可以触发这个事件
visibilitychange兼容性:(仅参考)
onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。
该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。
所以这事件中我们不需要写返回值,写了返回值后会弹出我们控制不了的提示信息