mounted () { window.addEventListener("beforeunload", () => this.beforeunloadHandler()) window.addEventListener("unload", () => this.unloadHandler())},destroyed() { window.removeEventListener("beforeunload", () => this.beforeunloadHandler.
根据执行不同的操作(刷新or关闭)所需要的时间来判断是执行了哪个操作。
浏览器关闭执行的是 beforeunload ， unload 这两个事件；
而浏览器刷新执行的是beforeunload， unload， load 三个事件；
在mounted生命周期中挂载beforeunload，和unload事件，通过执行间隔时间判断是刷新页面还是卸载（关闭）页面，如果是关闭浏览器，两个事件执行间隔事件会少于5ms,刷新页面时间会长，不同页面经测试所需时间8~100ms之间不等。注意销毁事件 避免影响其他页面 (destroyed生命周期)
本案例中使用了两个事件beforeunload事件，unload事件，区别如下:
beforeunload在unload之前执行
beforeunload
- 页面所有资源均未释放，且页面可视区域效果没有变化
- UI人机交互失效(window.open,alert,confirm全部失效)
- 最后时机可以阻止unload过程的执行.(beforeunload事件的Cancelable属性值为Yes)
unload
- 页面所有资源(img, iframe等)均未被释放
- 页面可视区域一片空白
- UI人机交互失效(window.open,alert,confirm全部失效)
- 没有任何操作可以阻止unload过程的执行。(unload事件的Cancelable属性值为No） </
最低0.47元/天 解锁文章
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
