JavaScript beforeunload重定向偶发跳转/undefined问题排查修复

偶发跳转到/undefined的核心原因 #

代码的核心错误是对beforeunload事件的事件对象存在认知偏差：

• beforeunload是挂载在window上的页面生命周期事件，触发时事件源event.target永远是window对象本身，而不是误以为的「触发跳转的a标签/按钮等元素」
• window对象本身不存在href属性，href是window.location对象下的属性，因此在redirect函数里读取event.target.href时，拿到的永远是undefined
• 之所以不是每次跳转都出错，是因为现代浏览器对beforeunload事件的preventDefault()有严格限制：根本无法可靠阻断页面的默认卸载流程，绝大多数时候浏览器会直接忽略阻止逻辑，按原计划执行跳转，绑定的transitionend回调还没来得及触发，页面就已经卸载了，因此不会执行到给location.href赋值undefined的逻辑，表现为正常跳转。
• 大约每5次出现1次错误的触发条件是：当修改body.style.opacity = 0的操作刚好阻塞主线程几毫秒，transitionend事件在页面正式开始卸载前触发，这时候redirect函数执行，把undefined赋值给location.href，浏览器就会把undefined当成相对路径解析，跳转到当前域名下的/undefined路径。

为什么移除redirect函数后功能正常 #

你的推测完全成立：

• 代码里写的event.preventDefault()并没有真的阻止页面跳转，淡出动画能生效，本质是浏览器从触发卸载、发起新页面请求，到收到新页面响应、完成旧页面替换之间存在几十到数百毫秒的空档期，这段时间旧页面的主线程还没有被冻结，会正常渲染CSS过渡动画，看到的淡出效果只是浏览器在卸载间隙完成的渲染，和阻止跳转、手动触发跳转的逻辑没有任何关系。
• 移除redirect函数之后，只是在beforeunload触发时同步修改了body的透明度，没有额外执行错误的地址赋值逻辑，浏览器会按默认流程完成跳转，自然不会再出现跳转到/undefined的问题。

实现可靠淡出跳转的正确方案 #

beforeunload事件的设计初衷是给开发者做「未保存内容提示」用的，浏览器会严格限制该事件内可执行的操作，永远不要尝试在这个事件里阻断卸载、等待动画播放完成后再跳转。如果需要稳定的页面前跳转淡出效果，正确实现逻辑如下：

• 拦截页面内所有会触发跳转的交互：包括a标签的click事件、表单的submit事件
• 在上述交互事件的回调中调用preventDefault()阻止默认跳转
• 给body添加对应类名触发淡出过渡
• 监听transitionend事件，等动画播放完成后，再手动读取目标地址执行跳转、或者触发表单提交

内容的提问来源于stack exchange，提问作者frielmv