如何阻止网站页面导航/跳转？SAP改造中的页面拦截失效问题

首先得说清楚：beforeunload 不能直接阻止页面跳转——现代浏览器对这个事件做了严格限制，你调用 event.preventDefault() 根本不会生效，它的设计初衷只是给用户一个确认离开的弹窗，而不是让开发者强行拦截跳转。这就是你代码没效果的核心原因。

要实现你的需求（拦截跳转、自定义路由+加载JS），得分场景针对性处理，下面是具体的解决思路和代码：

一、拦截内部跳转（同域页面跳转） #

大部分站点的跳转都是内部的，比如点击<a>标签、修改window.location.href、调用history.pushState，这些都可以直接拦截并替换成你的自定义逻辑：

1. 拦截所有<a>标签点击 #

监听全局点击事件，判断目标是否是同域的<a>标签，阻止默认跳转后处理自定义路由：

document.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if (!link) return;

  // 只拦截同域跳转，外部链接可以放行（或者也用beforeunload提示）
  if (link.origin === window.location.origin) {
    e.preventDefault();
    const targetUrl = link.href;
    
    // 执行你的自定义逻辑：加载JS、更新页面内容
    handleCustomRoute(targetUrl);
    
    // 更新浏览器历史，避免刷新页面后路由错乱
    history.pushState({ path: targetUrl }, '', targetUrl);
  }
});

// 示例：自定义路由处理函数
function handleCustomRoute(url) {
  console.log('处理自定义路由:', url);
  // 根据URL加载对应的JS模块，比如动态创建script标签
  const path = new URL(url).pathname;
  const script = document.createElement('script');
  script.src = `/custom-scripts${path}.js`;
  script.onload = () => {
    // JS加载完成后，执行页面更新逻辑
    updatePageContent(path);
  };
  document.body.appendChild(script);
}

function updatePageContent(path) {
  // 这里写替换页面内容的逻辑，比如修改innerHTML、渲染组件等
  document.getElementById('app').innerHTML = `<h1>当前路由：${path}</h1>`;
}

2. 拦截window.location.href赋值 #

有些代码会直接修改location.href跳转，这时候需要重写href的setter：

const originalHrefDescriptor = Object.getOwnPropertyDescriptor(window.location, 'href');

Object.defineProperty(window.location, 'href', {
  set(value) {
    const targetUrl = new URL(value);
    if (targetUrl.origin === window.location.origin) {
      // 同域跳转，走自定义路由
      handleCustomRoute(value);
      history.pushState({ path: value }, '', value);
    } else {
      // 外部链接，调用原生逻辑放行
      originalHrefDescriptor.set.call(window.location, value);
    }
  },
  get() {
    return originalHrefDescriptor.get.call(window.location);
  }
});

3. 拦截history.pushState/replaceState #

这两个方法会修改浏览器历史但不会触发beforeunload，所以必须重写：

// 重写pushState
const originalPushState = history.pushState;
history.pushState = function(state, title, url) {
  if (url) {
    handleCustomRoute(url);
  }
  originalPushState.call(this, state, title, url);
};

// 重写replaceState
const originalReplaceState = history.replaceState;
history.replaceState = function(state, title, url) {
  if (url) {
    handleCustomRoute(url);
  }
  originalReplaceState.call(this, state, title, url);
};

二、处理外部跳转/页面刷新 #

如果用户点击了外部链接、刷新页面，或者关闭标签页，这时候只能用beforeunload触发确认弹窗，无法强行阻止（浏览器不允许），正确的用法是：

window.addEventListener('beforeunload', (event) => {
  // 现代浏览器需要设置returnValue，自定义文本可能被浏览器忽略
  event.returnValue = '你还有未保存的内容，确定要离开吗？';
  // 部分旧浏览器需要返回字符串，兼容用
  return '你还有未保存的内容，确定要离开吗？';
});

最后总结 #

要实现完全的自定义路由控制，你需要：

• 针对内部跳转：拦截<a>点击、重写location.href、重写history的API，把所有跳转逻辑替换成你的自定义处理
• 针对外部跳转/刷新：用beforeunload触发确认提示，尊重用户选择

这样就能覆盖绝大多数跳转场景，实现你需要的单页应用效果。

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