监听浏览器窗口关闭

”叉掉“浏览器页面时的提示是如何实现的？

-- 监听 beforeunload 事件，具体来讲：

当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件可在该事件中使用 e.preventDefault ，这样点完"×"页面也不会立即关闭，而是弹出一个提示框，提示离开可能不会保存更改，并询问是否关闭，此时用户可以取消你能够监听该事件来让用户二次确认是否退出，避免意外退出导致用户输入数据丢失，从而影响用户体验在Vue中使用该功能

mounted() {
	window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
},
destroyed() {
	window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
},
methods: {
	beforeunloadFn(e) {
		// 这个事件只有在鼠标真正和浏览器有了交互，再刷新或者关闭时才会触发, 浏览器事件会弹框确认用户是否要离开页面
		e = e || window.event
		if (e) {
			e.preventDefault()
			e.returnValue = false
		}
		console.log('关闭提示')
	}
}

这个方法有个弊端：没法区分是刷新还是关闭

代码 优化：

beforeDestroy() {
		// 监听浏览器前进回退
		window.removeEventListener('popstate', this.handleBack())
		// 监听标签页关闭和刷新
		window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
		window.removeEventListener('unload', e => this.unloadHandler(e))
		// 监听浏览器切换标签页
		document.removeEventListener('visibilitychange', this.changePage())
	},
	mounted() {

		// 监听浏览器前进回退
		window.addEventListener('popstate', () => this.handleBack(), false)
		// 监听标签页关闭和刷新
		window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
		window.addEventListener('unload', e => this.unloadHandler(e))
		// 监听浏览器切换标签页
		document.addEventListener('visibilitychange', this.changePage())
	},
	methods: {
		changePage() {
			console.log('监听浏览器返回前进1')
		},

		handleBack() {
			console.log('监听浏览器返回前进2')
		},
		beforeunloadHandler() {
			this.beforeUnloadTime = new Date().getTime()
		},
		unloadHandler() {
			this.gapTime = new Date().getTime() - this.beforeUnloadTime
			//判断是窗口关闭还是刷新
			if (this.gapTime <= 5) {
				console.log('关闭窗口')
			} else {
				console.log('浏览器刷新');
				// 浏览器刷新后重新注册监听前进后退方法(刷新导致监听失效)
				window.addEventListener('popstate', () => this.handleBack(), false)
			}
		},
	}