本文将介绍如何使用javascript实现一个智能的“返回上一页”功能，确保用户点击返回按钮时仅在当前域名内跳转。通过检查`document.referrer`与`window.location.hostname`，可以有效防止用户被意外导航到外部网站，提升用户体验和安全性。
引言：定制化返回按钮的挑战
在Web应用开发中，为用户提供一个“返回上一页”的按钮是常见的需求。虽然浏览器自带的返回功能足以应对大多数情况，但在某些定制化场景下，开发者可能需要通过JavaScript来控制这一行为。例如，一个单页应用（SPA）可能需要更精细的导航控制，或者一个特定页面需要确保用户始终停留在当前网站内部。然而，简单地调用history.back()可能会带来意想不到的问题，尤其是在涉及到页面来源检查时。
理解history.back()的局限性
history.back()函数能够让浏览器导航到历史记录中的上一个页面。它的行为与用户点击浏览器“后退”按钮相同。问题在于，这个“上一个页面”可以是任何网站，包括用户从外部网站链接到当前页面，或者在当前网站内部跳转。如果我们的定制返回按钮旨在将用户带回本站的某个页面，那么当上一个页面是外部网站时，直接使用history.back()就可能将用户引导至站外。这可能不符合预期，造成用户困惑，甚至带来安全风险或糟糕的用户体验。例如，一个恶意链接可能将用户带到你的网站，然后通过一个定制的“返回”按钮将用户重定向回恶意网站。
智能返回机制的核心：document.referrer与window.location.hostname
为了实现一个“智能”的返回功能，即仅当上一个页面属于当前域名时才执行history.back()，我们需要利用两个关键的浏览器属性：document.referrer和window.location.hostname。
document.referrer 简介
document.referrer 属性返回导航到当前页面的上一页的URL。它是一个字符串，包含了来源页面的完整URL。如果用户直接输入URL、通过书签访问、从新标签页打开，或者从一个设置了“无referrer”策略的页面跳转而来，这个属性可能为空字符串。它提供了一个检查页面来源的机制。
立即学习“Java免费学习笔记（深入）”；
window.location.hostname 简介
window.location.hostname 属性返回当前页面的主机名（即域名），例如 www.example.com 或 localhost。它不包含协议（如http:、https:）或端口号。
通过比较 document.referrer 中包含的主机名是否与 window.location.hostname 相同，我们就能判断上一页是否属于当前域名。
实现智能返回功能
以下是实现这一功能的JavaScript代码示例：
/**
* 安全地返回上一页，仅当上一页属于当前域名时执行。
* 如果上一页不属于当前域名，可以根据业务需求执行其他操作。
*/
function goBackSafely() {
// 检查 document.referrer 是否存在且包含当前页面的主机名
// document.referrer 可能为空字符串，或者包含完整的URL
if (document.referrer && document.referrer.includes(window.location.hostname)) {
history.back(); // 如果上一页是同域名，则返回上一页
} else {
// 可选：如果上一页不属于当前域名，可以执行其他操作，例如跳转到首页或显示提示
console.warn("上一页不属于当前域名或referrer不可用，不执行 history.back()。");
// 示例：跳转到网站首页，提供一个明确的导航路径
// window.location.href = "/";
// 示例：或者只是保持在当前页面，不做任何操作
}
}
// 如何在HTML中调用：
// 代码解析：
- function goBackSafely()：定义一个名为 goBackSafely 的函数，用于封装返回逻辑。
- document.referrer：获取当前页面的来源URL。
- window.location.hostname：获取当前页面的域名。
- document.referrer && document.referrer.includes(window.location.hostname)：这是核心判断逻辑。
- document.referrer：首先判断 document.referrer 是否有值（非空字符串），避免对空字符串调用 includes 方法。
- document.referrer.includes(window.location.hostname)：接着检查 document.referrer 字符串中是否包含当前页面的主机名。如果包含，则表示上一页来自同一个域名。
- history.back()：如果上述条件满足（即上一页是同域名页面且referrer可用），则执行浏览器返回操作。
- else 分支：当上一页不属于当前域名，或者 document.referrer 不可用时，可以根据业务需求进行处理，例如不执行任何操作，或者跳转到网站的特定页面（如首页），以提供更好的用户体验。
注意事项与最佳实践
-
document.referrer 的限制：
- 空字符串： 如果用户直接访问当前页面（例如通过书签、直接输入URL），或者从一个“无referrer”策略的页面（如某些隐私保护浏览器设置或HTTP头部Referrer-Policy: no-referrer）跳转而来，document.referrer 将为空字符串。在这种情况下，上述代码不会执行 history.back()。
- 跨域： 如果上一页是跨域的，document.referrer 会包含完整的URL。然而，某些安全策略可能会限制或省略referrer信息。
- HTTP到HTTPS： 从HTTP页面跳转到HTTPS页面时，referrer信息通常不会传递。
- iframe： 在iframe中，document.referrer会是包含该iframe的父页面的URL。
用户体验考量： 当不满足同域名返回条件时，需要考虑用户的预期。是保持在当前页面，还是提供一个替代的导航方案（例如，跳转到网站首页或某个特定页面）？在上述代码的 else 分支中可以实现这些逻辑，以确保用户不会陷入“无路可走”的境地。
安全性增强： 此方法有效增强了安全性，防止恶意网站通过诱导用户点击自定义返回按钮，将其重定向回钓鱼网站或其他不期望的外部页面。这对于维护网站的信任度和用户安全至关重要。
总结
通过巧妙地结合 document.referrer 和 window.location.hostname，我们可以为Web应用实现一个更加智能和安全的“返回上一页”功能。这不仅提升了用户体验，确保了导航的连贯性，也有效规避了潜在的安全风险。在设计自定义导航逻辑时，深入理解这些浏览器API的特性及其局限性至关重要，从而构建健壮且用户友好的Web应用程序。
