history.back() 在同一域上导航时不起作用？

Posted 2023-03-06

【中文标题】history.back() 在同一域上导航时不起作用？

【英文标题】：history.back() Not Working When Navigating Back on Same Domain?

【发布时间】：2020-12-27 02:10:44

【问题描述】：

我想实现一个功能，以确保在所有浏览器上提示返回以保持在给定域内，并避免在历史记录中跳回太远。

这是我目前的进度：

<script type="text/javascript">   
window.addEventListener("load", function(event)
    if (document.referrer.indexOf(window.location.host) !== -1) 
        history.back();
    
);
</script>

这是我之前实现的：

<script type="text/javascript">

window.addEventListener("load",function(event)
    var historyTraversal=event.persisted||
    (typeof window.performance!=="undefined"&&
    window.performance.navigation.type===2);
    if(historyTraversal)
        window.history.back();
    
);

</script>

这两个脚本有什么明显的区别吗？

【问题讨论】：

它们看起来一点也不相似，它们有很大的不同。您需要指定您尝试过的和没有工作的内容以及任何顾虑。仅针对改进代码的一般性请求对于关于 SO 的问题来说过于宽泛

在第一个脚本中，我尝试创建第二个脚本的更新版本，其中包含不推荐使用的内容。

【参考方案1】：

我想实现一个功能，以确保在所有浏览器上提示返回以保持在给定域内，并避免在历史记录中跳回太远。

您所写的似乎是窗口加载时的事件侦听器。你想什么时候使用你说的功能？

现在，您提供的第一个脚本执行一个函数on window load。该函数检查the referrer（链接到当前页面的页面的URL），如果当前主机名是在该引荐来源URL中（即indexOf返回的值不是-1，表示匹配），然后浏览器返回。

假设存在此加载处理程序，则在每次页面加载时，浏览器都会返回，直到引荐来源网址不包含当前主机名。

但是，我不能说这完全符合您的要求 - 这取决于您返回到定义负载处理程序函数的每个页面。

回答你的第二个问题：

这两个脚本有什么明显的区别吗？

在您列出的第二个脚本中，您还有一个用于窗口加载事件的事件处理程序，但是第二个处理程序不是将主机名与引用者进行比较，而是依赖于已弃用的功能。检查PerformanceNavigation type，如果是2（表示通过历史“返回”导航到当前页面），则返回。

这两种方法的主要区别：

第一个函数基于域返回，而第二个函数根本不查看域 第二个函数依赖于已弃用的功能，而第一个函数更直接 只要通过返回到达当前页面，第二个函数就会返回，而第一个函数只有在前一个页面与当前页面位于同一域时才会返回

似乎第一个功能更符合您所说的您想要的，但似乎都不是特别好的方法，考虑到如果用户使用书签或键入链接访问链接，则引用者将为空直接在浏览器中（即不是通过链接指向该页面）。

相反，如果您可以在 cookie 或其他基于会话的存储中跟踪，跟踪用户从您想要返回的初始页面转发了多少页面，然后使用 @987654329 可能会更好@回到你一直跟踪的那么多页面n。 （参见：JavaScript going back multiple times in history）。

这当然会引入它自己的问题，特别是如果用户离开您的域然后又返回时会发生什么 - 弄清楚如何保持准确的计数，以便它始终返回到 URL 的最新初始实例您的域将是下一步。

【讨论】：

感谢您的广泛而深入的回答。我尝试实现此类代码的主要原因是第三方网站（Tumblr）的框架问题，该网站有一个错误，在移动浏览器上提示时不会加载上一页，而是重新加载当前页面一遍又一遍。我正在尝试覆盖它，第二个脚本确实解决了移动问题，但我试图在没有弃用内容的情况下实现某些东西，所以我有点陷入困境......

没问题 - 很高兴为您提供帮助！当用户尝试返回时，是 Tumblr 上的用户（并且 Tumblr 只是重新加载而不是返回），还是您网站上的用户并尝试返回 Tumblr 并且历史记录不再有效，因此它重新加载了您的页面?我不清楚这里的实际用例。在我看来，你很难覆盖 Tumblr 所做的事情，因为你无法将代码注入他们的页面。你在使用 iframe 或嵌入式 Tumblr 页面或其他东西吗？

我之前发布了一个问题，它描述了手头的基本相同问题。这是一个链接：***.com/questions/63783447/…。我有一个演示站点，显示问题已部分解决，但 Firefox（桌面浏览器）仍然存在一些功能问题。

我无法访问 your demo site，因为您遇到了阻止我的 SSL 错误：SSL_ERROR_BAD_CERT_DOMAIN：“网站通过证书证明其身份。Firefox 不信任此站点，因为它使用证书不适用于 www.testblog123098.tumblr.com。证书仅对以下名称有效：*.tumblr.com、tumblr.com"