--- highlight: an-old-hope --- # 前言前几天在工位正在摸鱼的时候，技术组长悄咪咪走到了我的身后
![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fe1e0e99cf6f4705a6f427e255568d66~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiA6Lev5ZCR5YyXd293:q75.awebp?rk3s=f64ab15b&x-expires=1759179595&x-signature=q6EpuHbEEGmiv%2BskzAyhWrR7n4I%3D)
站了一会之后拍拍我的肩膀说："大佬这有一个功能需要你优化一下"。
简单给 JYM 叙述一下这个需求：就是我们有一个页面可以调用设备的摄像头拍摄视频，拍完之后用户可以把拍摄的视频直接上传或者保存到本地。但是用户如果在上传之前没有保存到本地，那么这段视频是存储到内存里的，当用户手动点击页面刷新、关闭、历史回退、路由跳转等操作，都会导致这段视频资源丢失，此前我们给了用户提示，但是以防万一，还是要拦截一下用户的这些操作并告知其风险才行。
需求并不复杂，但是不太常见，我在迭代的时候遇到了一些坑，分享出来，大家如果也有这样的需求可以参考一下。 # 需求首先列举一下需要拦截的行为，接下来我们逐个实现。 1. 浏览器前进后退 2. 标签页刷新和关闭 3. 路由跳转 # 1、拦截浏览器前进后退 > 这里的实现是核心，涉及到大量 [History API](https://developer.mozilla.org/zh-CN/docs/Web/API/History) 的理解，如果不太了解可以先看一下这两个文章：
> [拦截浏览器后退方法附带独家干货知识点](https://juejin.cn/post/7275978079703891983)
> [浏览器的History、Location对象，及使用js控制网页的前进后退和加载，刷新当前页面总结！](https://juejin.cn/post/7036013860255432712) 首先给大家明确一点，出于安全问题，浏览器并不支持通过js拦截浏览器的前进后退操作，但是可以使用**障眼法**。
具体思路就是我们可以在页面加载的时候，使用 [history.pushState](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState) 这个API给页面添加一个当前页面的历史记录（不会导致页面刷新），此时最近的两条历史记录都是当前页面，当用户点击后退的时候，浏览器会退到上一个记录（还是当前页面），这时会触发 [popstate事件](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event) ，回退的时候再往历史记录里添加一条当前页面的记录（为了下次拦截使用），同时我们使用弹窗提示用户一些信息，如果用户确定要回退，我们再使用 **history.go(-2)** 跳过这两条当前页面的记录，返回到真正的上个页面，这样我们就成功模拟了回退操作的拦截。
![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/51d6b84ec50e4747b71d72c5e9876bae~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiA6Lev5ZCR5YyXd293:q75.awebp?rk3s=f64ab15b&x-expires=1759179595&x-signature=Ga1yjJ%2BQCTIB3VOwpcMkhlSny6Y%3D) ## 代码实现： ```js import { onUnmounted } from 'vue' interface IBrowserInterceptEvents { popstate?: (next: () => void) => void // 监听浏览器前进后退 } // 作用：添加一个历史记录，以便后续模拟拦截后退 function addStopHistory() { const state = { id: 'stopBack' } if (history.state.id === 'stopBack') return history.pushState(state, '', window.location.href) } const useBrowserInterceptor = (events: IBrowserInterceptEvents) => { const { popstate } = events let popstateCallback: EventListener | undefined let isHistoryBack = false // 拦截浏览器后退 if (popstate) { addStopHistory() popstateCallback = () => { addStopHistory() popstate(() => { isHistoryBack = true history.go(-2) }) } window.addEventListener('popstate', popstateCallback) } // 销毁事件 onUnmounted(() => { // 不是历史后退触发的，仅仅是组件卸载，才需要清除模拟拦截后退时添加的历史记录 if (popstate && !isHistoryBack) { history.go(-1) } popstateCallback && window.removeEventListener('popstate', popstateCallback) }) } export default useBrowserInterceptor ``` ## 使用 ```js // 使用拦截 useBrowserInterceptor({ popstate: showWarnModal, }) // 弹窗提示 const showWarnModal = (next: any) => { const { pending, uploading, failed } = taskStatusMap.value if (pending + uploading + failed > 0) { Modal.confirm({ title: h('h3', '当前页面有未完成的任务！'), width: 500, content: h('div', null, [ taskStatusMap.value.pending ? h(Tag, { color: 'default' }, `待上传：${taskStatusMap.value.pending}`) : null, taskStatusMap.value.uploading ? h(Tag, { color: 'processing' }, `上传中：${taskStatusMap.value.uploading}`) : null, taskStatusMap.value.failed ? h(Tag, { color: 'error' }, `上传失败：${taskStatusMap.value.failed}`) : null, h( 'div', { style: { marginTop: '10px' } }, '此操作会导致未完成上传的视频数据丢失，确定要继续吗？' ) ]), onOk() { next() } }) } else { next() } } ``` # 2、拦截标签页刷新和关闭这个比较简单，我们只需要监听 [beforeunload](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeunload_event) 事件，阻止默认行为即可。但是这里要注意：出于浏览器安全问题，我们只能使用浏览器默认弹窗提示（如下图），无法自定义提示内容。
> 历史回退也有可能导致触发 **beforeunload** 事件，所以要添加一个 **isHistoryBack** 变量做判断区分。 **刷新页面：**
![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/69fb3a6425634081afba1649f5b269a1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiA6Lev5ZCR5YyXd293:q75.awebp?rk3s=f64ab15b&x-expires=1759179595&x-signature=mOXbT01H8O2HrnPELwar64fI8q4%3D)
**关闭页面：**
![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d00b5323a51d4a46a521116bcef0d1ab~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiA6Lev5ZCR5YyXd293:q75.awebp?rk3s=f64ab15b&x-expires=1759179595&x-signature=sXc2O2tySR5UQwD%2B6MyYDUOWXg4%3D)
## 代码实现 ```js import { onUnmounted } from 'vue' interface IBrowserInterceptEvents { popstate?: (next: () => void) => void // 监听浏览器前进后退 beforeunload?: EventListener // 监听标签页刷新和关闭 } // addStopHistory ... const useBrowserInterceptor = (events: IBrowserInterceptEvents) => { const { popstate, beforeunload } = events let popstateCallback: EventListener | undefined let beforeunloadCallback: EventListener | undefined let isHistoryBack = false // 拦截浏览器后退 ... // 拦截标签页关闭和刷新 if (beforeunload) { beforeunloadCallback = (event) => { if (!isHistoryBack) beforeunload(event) } window.addEventListener('beforeunload', beforeunloadCallback) } // 销毁事件 onUnmounted(() => { // 不是后退且不是导航守卫触发的，仅仅是组件卸载，才需要清除模拟拦截后退时添加的历史记录 if (popstate && !isHistoryBack) { history.go(-1) } popstateCallback && window.removeEventListener('popstate', popstateCallback) beforeunloadCallback && window.removeEventListener('beforeunload', beforeunloadCallback) }) } export default useBrowserInterceptor ``` ## 使用 ```js useBrowserInterceptor({ popstate: showWarnModal, beforeunload: (e) => { const { pending, uploading, failed } = taskStatusMap.value if (pending + uploading + failed > 0) { e.preventDefault() e.returnValue = false } } }) ``` # 3、拦截路由跳转（完整版）这里我们可以使用 **vue-router** 提供的 [onBeforeRouteLeave](https://router.vuejs.org/zh/api/#Functions-onBeforeRouteLeave) 钩子函数在组件内注册一个导航守卫，当用户跳转路由的时候进行弹窗提示。 > 历史回退也有可能触发导航守卫，也要使用 **isHistoryBack** 做判断区分。 > > **最后我们还要处理一下事件的销毁，组件卸载时销毁事件，这里有个注意点：我们不仅要移除注册的事件，当组件卸载不是历史后退（isHistoryBack）也不是路由跳转（isRouter）触发的，仅仅是组件卸载（比如v-if），这个时候还需要清除模拟拦截后退时添加的历史记录，否则会造成页面回退异常。** ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bd439a74425d4552a8846e21089fd717~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiA6Lev5ZCR5YyXd293:q75.awebp?rk3s=f64ab15b&x-expires=1759179595&x-signature=yy0loN6DVD1K9DUO4BozY3v6yj4%3D) ## 代码实现（完整版） ```js import { onUnmounted } from 'vue' import { type NavigationGuardNext, onBeforeRouteLeave } from 'vue-router' interface IBrowserInterceptEvents { popstate?: (next: () => void) => void // 监听浏览器前进后退 beforeunload?: EventListener // 监听标签页刷新和关闭 beforeRouteLeave?: (next: NavigationGuardNext) => void // 导航守卫 } // 作用：添加一个历史记录，以便后续模拟拦截后退 function addStopHistory() { const state = { id: 'stopBack' } if (history.state.id === 'stopBack') return history.pushState(state, '', window.location.href) } const useBrowserInterceptor = (events: IBrowserInterceptEvents) => { const { popstate, beforeunload, beforeRouteLeave } = events let popstateCallback: EventListener | undefined let beforeunloadCallback: EventListener | undefined let isHistoryBack = false let isRouter = false // 拦截浏览器后退 if (popstate) { addStopHistory() popstateCallback = () => { addStopHistory() popstate(() => { isHistoryBack = true history.go(-2) }) } window.addEventListener('popstate', popstateCallback) } // 拦截标签页关闭和刷新 if (beforeunload) { beforeunloadCallback = (event) => { if (!isHistoryBack) beforeunload(event) } window.addEventListener('beforeunload', beforeunloadCallback) } // 导航守卫 beforeRouteLeave && onBeforeRouteLeave((_to, _from, next) => { if (isHistoryBack) { next() return } beforeRouteLeave(() => { isRouter = true next() }) }) // 销毁事件 onUnmounted(() => { // 不是后退且不是导航守卫触发的，仅仅是组件卸载，才需要清除模拟拦截后退时添加的历史记录 if (popstate && !isHistoryBack && !isRouter) { history.go(-1) } popstateCallback && window.removeEventListener('popstate', popstateCallback) beforeunloadCallback && window.removeEventListener('beforeunload', beforeunloadCallback) }) } export default useBrowserInterceptor ``` ## 使用 ```js // 使用拦截 useBrowserInterceptor({ beforeRouteLeave: showWarnModal, popstate: showWarnModal, beforeunload: (e) => { const { pending, uploading, failed } = taskStatusMap.value if (pending + uploading + failed > 0) { e.preventDefault() e.returnValue = false } } }) // 弹窗提示 const showWarnModal = (next: any) => { const { pending, uploading, failed } = taskStatusMap.value if (pending + uploading + failed > 0) { Modal.confirm({ title: h('h3', '当前页面有未完成的任务！'), width: 500, content: h('div', null, [ taskStatusMap.value.pending ? h(Tag, { color: 'default' }, `待上传：${taskStatusMap.value.pending}`) : null, taskStatusMap.value.uploading ? h(Tag, { color: 'processing' }, `上传中：${taskStatusMap.value.uploading}`) : null, taskStatusMap.value.failed ? h(Tag, { color: 'error' }, `上传失败：${taskStatusMap.value.failed}`) : null, h( 'div', { style: { marginTop: '10px' } }, '此操作会导致未完成上传的视频数据丢失，确定要继续吗？' ) ]), onOk() { next() } }) } else { next() } } ``` # 总结我们实现了对 **用户刷新、关闭标签页、浏览器历史回退、路由跳转** 等操作的拦截，可以在某些特殊场景下给用户一些友好的提示，提升用户体验。 # 参考文章 [拦截浏览器后退方法附带独家干货知识点](https://juejin.cn/post/7275978079703891983)
[浏览器的History、Location对象，及使用js控制网页的前进后退和加载，刷新当前页面总结！](https://juejin.cn/post/7036013860255432712)