如何检测导航历史的站内/站外来源，实现自定义返回按钮功能

核心思路是解析document.referer的域名，和当前页面的域名做对比——如果一致，说明是站内跳转，调用history.back()；如果不一致或者document.referer为空，就执行你的自定义重定向逻辑。这样就能完美解决站外来源返回外部网站的问题。

步骤1：编写可靠的域名提取函数 #

直接对比完整URL容易出错（比如路径不同但域名相同的情况），所以先写一个函数来提取URL的核心域名部分：

function getSiteDomain(url) {
  if (!url) return null;
  // 利用浏览器原生的a标签解析URL，安全且无需额外库
  const linkElement = document.createElement('a');
  linkElement.href = url;
  // 返回「协议+域名」组合（比如https://your-site.com），确保子域名/协议不同的情况能正确区分
  return `${linkElement.protocol}//${linkElement.host}`;
}

步骤2：判断来源并执行对应逻辑 #

用上面的函数对比当前站点和来源站点的域名，再决定跳转方式：

function handleCustomBack() {
  const currentSite = getSiteDomain(window.location.href);
  const referrerSite = getSiteDomain(document.referrer);

  // 情况1：来源是站内（referrer存在且域名和当前站点一致）
  if (referrerSite && referrerSite === currentSite) {
    history.back();
  } else {
    // 情况2：来源是站外，或者无有效referrer（直接输入URL、书签、隐私模式等）
    // 替换成你的自定义重定向地址
    window.location.href = '/your-preferred-redirect-page';
  }
}

额外的边界情况处理 #

• 隐私模式/Referer被屏蔽：部分浏览器在隐私模式下会阻止发送Referer，或者用户安装了屏蔽插件，此时document.referrer为空，这种情况我们统一按「无有效站内来源」处理，执行自定义重定向。
• 子域名互通需求：如果你的站点包含多个子域名（比如blog.your-site.com和shop.your-site.com），且希望它们之间的跳转也算站内，可以修改域名提取函数，只提取主域名：

  function getMainDomain(url) {
    if (!url) return null;
    const linkElement = document.createElement('a');
    linkElement.href = url;
    const domainParts = linkElement.host.split('.');
    // 针对.com/.org等常规顶级域名取最后两段，若你的域名是.co.uk这类，需要调整这里的逻辑
    return domainParts.slice(-2).join('.');
  }
  

  之后对比主域名即可实现子域名间的站内识别。

为什么这个方案更可靠？ #

单纯判断document.referer是否为空，无法区分「站外来源」和「用户直接访问/书签打开」的情况。而通过域名对比，我们能精准识别出站外来源的场景，避免误跳转到谷歌等外部网站，同时保留站内正常的返回逻辑。

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