如何实现用户通过浏览器返回按钮离开站点时重定向至指定页面？

你之前的代码问题在于判断逻辑完全不对——只检查URL的hash和当前页面末尾是否是#，这和是否返回外部站点没有任何关联，自然不会生效。要实现仅在返回外部站点时触发重定向，核心是跟踪用户在当前站点的访问历史栈，当点击返回按钮后，若栈内已无站内页面，说明即将跳转至外部站点，此时再执行重定向。

具体实现思路 #

浏览器的popstate事件不会直接返回上一页的站点信息，所以需要手动维护站内页面的访问记录：

• 记录用户在本站访问过的所有页面URL
• 点击返回按钮时，先从记录中移除当前页面
• 检查剩余记录：如果没有站内页面，说明即将跳转到外部，触发重定向

代码示例 #

// 存储当前站点的访问历史，初始加入当前页面
const internalPages = [window.location.href];

// 判断某个URL是否属于当前站点
function isSameSite(url) {
  try {
    const targetHost = new URL(url).hostname;
    return targetHost === window.location.hostname;
  } catch {
    // 解析失败的URL默认视为外部站点
    return false;
  }
}

// 监听pushState事件（手动修改历史栈时触发，比如页面跳转）
window.addEventListener('pushState', (e) => {
  if (e.state?.url) {
    internalPages.push(e.state.url);
  }
});

// 监听replaceState事件（替换当前历史记录时触发）
window.addEventListener('replaceState', (e) => {
  if (e.state?.url) {
    internalPages.pop();
    internalPages.push(e.state.url);
  }
});

// 处理返回按钮的重定向逻辑
function handleBackRedirect() {
  // 返回时，当前页面从站内历史中移除
  internalPages.pop();

  // 检查剩余历史的最后一页是否为站内页面
  const lastPage = internalPages[internalPages.length - 1];
  if (!lastPage || !isSameSite(lastPage)) {
    // 重定向至指定页面
    location.replace('/faq');
    // 重定向后将新页面加入历史栈，避免无限循环
    internalPages.push(window.location.href);
  }
}

// 绑定popstate事件（点击浏览器返回按钮时触发）
window.addEventListener('popstate', handleBackRedirect);

// 初始化处理：若用户从外部站点进入，手动添加一条历史记录
if (!isSameSite(document.referrer)) {
  history.pushState({ url: window.location.href }, '', window.location.href);
  internalPages.push(window.location.href);
}

代码说明 #

• internalPages：用来记录用户在本站的访问轨迹，确保能准确判断返回时是否会跳出站点
• isSameSite：通过对比URL的域名判断是否为站内页面，避免误判本站子页面为外部站点
• 监听pushState和replaceState：这两个API会修改浏览器历史栈但不会触发popstate，必须手动更新站内历史记录
• 初始化逻辑：处理用户直接从外部站点进入的场景，确保首次点击返回时能触发重定向

注意事项 #

• 该方法依赖手动跟踪历史记录，若用户直接修改地址栏或使用非常规导航方式，可能出现判断偏差，但完全满足学校项目的需求
• 重定向后必须将新页面加入历史栈，否则用户再次点击返回会陷入循环

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