调用history.back()前如何检查目标URL？需拦截外部页面跳转

算力阿峰

2026-7-6

实现返回按钮跳转外部页面时自动禁用

核心限制说明

浏览器出于安全策略，无法直接读取history栈中的上一页URL，所以我们通过document.referrer（当前页面的来源URL）来判断上一页是否属于同域，以此决定是否允许返回。

实现代码

1. 域名提取工具函数

先写一个通用函数，用来从URL中提取域名：

function getDomain(url) {
  const link = document.createElement('a');
  link.href = url;
  return link.hostname;
}

2. 完整页面示例

<button id="backButton">返回上一页</button>

<script>
function getDomain(url) {
  const link = document.createElement('a');
  link.href = url;
  return link.hostname;
}

const backButton = document.getElementById('backButton');
const currentDomain = getDomain(window.location.href);
const referrerDomain = getDomain(document.referrer);

// 判断是否允许返回：存在来源URL且域名与当前页面一致
const allowBack = document.referrer && currentDomain === referrerDomain;

// 设置按钮状态
backButton.disabled = !allowBack;

// 绑定点击事件
backButton.addEventListener('click', () => {
  if (allowBack) {
    history.back();
  }
});
</script>

额外说明

如果用户是直接输入URL、通过书签打开当前页面，document.referrer为空，按钮会被禁用；

若需要将子域名（如blog.example.com）与主域名（example.com）视为同域，可修改getDomain函数，通过正则提取主域名：

function getMainDomain(url) {
  const link = document.createElement('a');
  link.href = url;
  // 匹配主域名（适用于多数常见域名格式）
  return link.hostname.match(/\w+\.\w+$/)?.[0] || link.hostname;
}