本文介绍如何使用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 事件上：
安全回退示例 当前页面
点击下方按钮尝试安全回退。
function goBackSafely() { if (document.referrer && document.referrer.includes(window.location.hostname)) { history.back(); } else { console.log("来源非本站或referrer不可用，不执行history.back()"); // 例如：如果无法回退，则跳转到首页 // window.location.href = "/"; alert("无法安全回退到本站的上一页。"); } }
或者，如果你使用更现代的 JavaScript 事件监听方式：
document.getElementById('backButton').addEventListener('click', goBackSafely); // ... goBackSafely 函数定义同上 ...
注意事项
尽管这种方法能够有效提升回退功能的安全性，但仍需注意以下几点：
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 的局限性，并为无法安全回退的情况提供合适的备用方案，以确保最佳的用户体验。
以上就是JavaScript 实现基于域名检查的安全回退功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589217.html
微信扫一扫 
支付宝扫一扫 
