本文介绍如何使用javascript实现一个智能的“返回”按钮。该功能在用户点击时，会首先检查前一页的来源域名是否与当前页面一致。只有当来源页面属于同一域名时，才执行浏览器回退操作，从而避免意外导航到外部网站，提升用户体验和安全性。
在网页开发中，我们经常需要提供一个“返回”按钮，让用户能够方便地回到上一页。通常，我们会使用 history.back() 方法来实现这一功能。然而，简单地调用 history.back() 可能会带来一些意想不到的问题。如果用户是通过外部网站链接进入当前页面，然后点击“返回”按钮，他们可能会被导航回那个外部网站，这可能不是我们期望的用户体验，也可能打断用户在当前网站的浏览流程。为了解决这个问题，我们可以实现一个更智能的“返回”功能，即在执行回退操作前，先检查上一页的来源是否属于当前网站的域名。
为什么需要安全的浏览器回退？
直接使用 history.back() 的潜在问题在于其不加区分地回退行为。无论是用户从本站内的其他页面跳转而来，还是从搜索引擎、社交媒体或任何外部网站点击链接进入，history.back() 都会尝试回到那个“上一个”页面。对于希望将用户留在自己网站内的场景，这种行为是不理想的。通过检查来源域名，我们可以确保用户只在本站内部进行回退，从而更好地控制用户导航路径，提升用户体验和网站粘性。
核心原理：document.referrer 与 window.location.hostname
实现这一功能的关键在于利用两个浏览器提供的全局属性：
- document.referrer: 这个属性返回链接到当前页面的那个页面的 URI（统一资源标识符）。简而言之，它告诉我们用户是从哪个页面跳转到当前页面的。如果用户直接在浏览器地址栏输入网址访问，或者通过书签、新标签页打开，document.referrer 通常会是空字符串。
- window.location.hostname: 这个属性返回当前 URL 的主机名（即域名）。例如，对于 https://www.example.com/path/page.html，hostname 将是 www.example.com。
通过比较 document.referrer 中包含的域名与 window.location.hostname，我们就可以判断前一个页面是否属于当前网站。
立即学习“Java免费学习笔记（深入）”；
实现安全的域内回退功能
下面是实现这个功能的 JavaScript 代码示例：
function goBackSafely() {
// 检查 document.referrer 是否存在且包含当前页面的主机名
// document.referrer 可能为空字符串，例如用户直接访问页面时
if (document.referrer && document.referrer.includes(window.location.hostname)) {
// 如果来源是本站域名，则执行浏览器回退
history.back();
} else {
// 如果来源不是本站域名，或者 document.referrer 不可用，
// 则不执行 history.back()，可以根据需要执行其他操作
console.log("来源非本站或referrer不可用，不执行history.back()");
// 示例：可以跳转到网站首页或某个特定页面
// window.location.href = "/";
// 示例：或者给用户一个提示
// alert("您是从外部网站访问的，无法返回上一页。");
}
}代码解析：
- document.referrer: 首先，我们检查 document.referrer 是否有值。如果它为空（例如，用户直接访问页面），则无法判断来源，此时不应执行 history.back()。
- document.referrer.includes(window.location.hostname): 这是核心判断逻辑。我们使用 includes() 方法来检查 document.referrer 字符串中是否包含当前页面的主机名。includes() 方法比直接比较字符串更灵活，因为它能处理 referrer 是完整 URL 的情况。
- history.back(): 只有当上述条件都满足时，才调用 history.back() 执行浏览器回退。
- else 分支：当来源不属于本站或 document.referrer 不可用时，我们选择不执行回退。在这个分支中，你可以根据实际需求添加备用逻辑，例如将用户导航到网站首页、显示提示信息，或者干脆不作任何操作。
如何使用此功能
将上述 goBackSafely 函数集成到你的网页中非常简单。你可以将其绑定到一个按钮的 onclick 事件上：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安全回退示例</title>
</head>
<body>
<h1>当前页面</h1>
<p>点击下方按钮尝试安全回退。</p>
<button onclick="goBackSafely()">返回上一页</button>
<script>
function goBackSafely() {
if (document.referrer && document.referrer.includes(window.location.hostname)) {
history.back();
} else {
console.log("来源非本站或referrer不可用，不执行history.back()");
// 例如：如果无法回退，则跳转到首页
// window.location.href = "/";
alert("无法安全回退到本站的上一页。");
}
}
</script>
</body>
</html>或者，如果你使用更现代的 JavaScript 事件监听方式：
<button id="backButton">返回上一页</button>
<script>
document.getElementById('backButton').addEventListener('click', goBackSafely);
// ... goBackSafely 函数定义同上 ...
</script>注意事项
尽管这种方法能够有效提升回退功能的安全性，但仍需注意以下几点：
-
document.referrer 的局限性：
- 为空的情况： 当用户直接在地址栏输入网址、通过书签访问、在新标签页打开、或者从 rel="noreferrer" 属性的链接跳转而来时，document.referrer 将为空字符串。在这种情况下，我们的函数会判断为无法回退。
- 跨域重定向： 如果中间存在跨域重定向，原始的 referrer 信息可能会丢失。
- HTTPS 到 HTTP： 从 HTTPS 页面跳转到 HTTP 页面时，出于安全考虑，浏览器通常不会发送 referrer 信息。
- 浏览器隐私设置： 某些用户的浏览器隐私设置可能会禁用 referrer 的发送。
- 用户体验： 当 referrer 不可用或不匹配时，用户点击“返回”按钮却没有反应，可能会感到困惑。因此，在 else 分支中提供一个明确的提示、跳转到首页或执行其他预设操作，能够改善用户体验。
- 单页应用 (SPA)： 在单页应用中，页面导航通常是通过前端路由实现的，history.back() 和 document.referrer 的行为可能与传统多页应用有所不同。在 SPA 中，更推荐结合前端路由库提供的导航控制功能来管理回退逻辑。
- 子域名处理： window.location.hostname 返回的是完整的子域名。如果你的网站在 www.example.com 和 blog.example.com 之间跳转，并且你希望它们被视为“本站”，那么你可能需要更复杂的逻辑来提取主域名进行比较。例如，可以检查 referrer 是否包含 example.com 而非完整的 www.example.com 或 blog.example.com。
总结
通过利用 document.referrer 和 window.location.hostname，我们可以为网站实现一个更加智能和安全的“返回”功能。这不仅能有效防止用户意外离开网站，还能提供更流畅、可控的导航体验。在实际应用中，开发者应充分考虑 document.referrer 的局限性，并为无法安全回退的情况提供合适的备用方案，以确保最佳的用户体验。
