Firefox中beforeunload事件触发后页面重定向路径异常问题

核心问题原因 #

在Firefox中，当hasChanges=true触发beforeunload弹窗，用户确认离开后，浏览器对后续导航操作的相对路径解析逻辑和Edge/IE存在差异。结合你的代码场景来看：

• 点击注销链接时，先执行postThis()（内部通过form.submit()提交到/path/backend），再设置window.location = "login.jsp"
• 无修改场景下，beforeunload不触发，window.location的相对路径基于当前页面http://localhost/path1/path2/login.jsp，正常解析为同目录的login.jsp
• 但触发beforeunload并确认离开后，Firefox在处理表单提交和页面unload的流程中，意外改变了相对路径的解析基准，导致login.jsp被解析为上一级目录（/path1/下的文件），最终跳转到错误路径

解决方案（针对遗留代码的兼容处理） #

作为遗留代码，我们尽量最小化改动，核心思路是避免依赖相对路径解析，改用绝对路径跳转：

方案1：动态构造绝对路径跳转 #

通过当前页面的路径信息，拼接出login.jsp的绝对路径，确保不管浏览器的解析逻辑如何，都能准确跳转：

$("#linkLogout").click(function(){
  postThis();
  // 获取当前页面所在目录的绝对路径
  const currentDir = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
  // 拼接完整绝对路径
  window.location = window.location.origin + currentDir + "login.jsp";
});

方案2：同步表单提交与跳转时机（可选） #

如果postThis()中的表单提交不需要页面导航（比如用iframe异步提交），可以等表单提交完成后再执行跳转，这种方式改动稍大：

$("#linkLogout").click(function(){
  // 给表单设置隐藏iframe作为提交目标
  const form = document.getElementById('your-form-id');
  form.target = 'hidden-submit-iframe';
  // 表单提交完成后执行跳转
  form.onload = function() {
    const currentDir = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
    window.location = window.location.origin + currentDir + "login.jsp";
  };
  postThis();
});

需要在页面中添加一个隐藏iframe：

<iframe name="hidden-submit-iframe" style="display: none;"></iframe>

为什么仅Firefox出现问题？ #

不同浏览器对beforeunload事件后的导航队列处理逻辑不同：

• Edge/IE在用户确认离开后，会保留原页面的路径基准来解析后续相对路径
• Firefox则在beforeunload确认后，重新梳理导航流程，导致相对路径的解析基准意外改变，最终出现路径错误

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