如何通过全局拦截特定格式的url跳转重写window.location.href window.open等跳转方式的进行拦截

如何在项目中全局拦截url的跳转？

AI BotBETA

在项目中全局拦截 URL 的跳转，可以通过全局定义一个 JavaScript 函数，然后在页面中所有需要进行拦截的跳转处调用此函数。

以下是一个示例代码：

window.myInterceptor = function(url) {
    // 在这里对 url 进行处理，例如判断其格式是否符合要求
    if (url.match(/特定格式/)) {
        // 拦截跳转
        return false; // 或者可以返回一个新的 URL
    } else {
        // 正常跳转
        return true;
    }
}

// 在页面中所有需要进行拦截的跳转处调用此函数
window.location.href = window.myInterceptor(window.location.href);
window.open = function() {
    var originalOpen = window.open;
    window.open = function(url) {
        url = window.myInterceptor(url);
        if (url === false) {
            return false; // 拦截跳转
        } else {
            return originalOpen.apply(this, arguments);
        }
    }
    return originalOpen;
}(window.open);

在这个示例中，window.myInterceptor 函数是全局拦截函数。当 URL 的格式符合要求时，该函数会返回 false，从而拦截跳转；否则，该函数会返回 true，表示正常跳转。在页面中所有需要进行拦截的跳转处（例如 window.location.href 和 window.open），都调用了 window.myInterceptor 函数。这样就可以实现全局拦截特定格式的 URL 跳转。

4 个回答

得票最新

643104191

2.5k21137

发布于
2023-12-15 广东

无法重写window.location.href,window.open等跳转方式
建议你跳转到目标页再做判断

DisLido

1822

发布于
2023-12-15 浙江

更新于
2023-12-15

可以通过serviceWorker的fetch事件拦截包括url跳转在内的所有请求

sw.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url); // 拦截到的请求地址
  if (url.pathname === '/aasd') {
    // 将请求响应变为'hello world'
    event.respondWith(new Response('hello world'));
    return;
  }
  // 返回html响应
  event.respondWith(
    new Response('<html><head></head><body><h1>hello world</h1></body></html>', {
      headers: {
        'Content-Type': 'text/html',
      },
    }),
  );
});

serviceWorker的注册和使用方法见MDN文档