如何检测用户是否点击了“返回”按钮

Question

当用户点击后退按钮(history-back-1)时，如何检测？然后弹出"用户点击了后退按钮！"的提示。

使用绑定(bind)（最好使用jQuery）

- TIMEX

---

Alex，你刚刚在https://dev59.com/rEvSa4cB1Zd3GeqPcCVA上提出了一个类似的问题。请勿垃圾邮件。 - Justin Johnson

可能是重复的问题：在JavaScript中，最好使用JQuery，当用户单击浏览器的“返回”按钮时，如何将某些内容添加到URL中？ - Brian Tompsett - 汤莱恩

Answer 1

一般情况下是不允许的（浏览器安全限制）。你可以在用户离开页面时得知（使用onbeforeunload、onunload触发），但是除非你已经设置了你的页面进行追踪，否则你无法得知他们去了哪里。

HTML5 引入了 HTML5 历史记录 API，在支持的浏览器中，如果用户返回到您站点上较早的“页面”，则会触发 onpopstate 事件。

- EricLaw

---

这个怎么样？https://dev59.com/Zmkv5IYBdhLWcg3wpCMz - Timo Huovinen

您可以以特定方式构建网页，使得浏览器返回功能可被检测，但是想要得知用户回退到哪个页面，只有当他们在您的网站上导航到另一个页面（您可以控制JavaScript的页面）时才能知道。如何构建这样的情景？当用户访问“PageA.htm”时，立即将其重定向到“PageB.htm”，如果他们再次加载“PageA.htm”，则可以“猜测”他们已经使用了“返回”功能。 - EricLaw

如果您向前导航，onpopstate也会触发。 - Luigi

Answer 2

尝试:

window.onbeforeunload = function (evt) {
  var message = 'Are you sure you want to leave?';
  if (typeof evt == 'undefined') {
    evt = window.event;
  }
  if (evt) {
    evt.returnValue = message;
  }
  return message;
}

- Adnan

---

如果用户转到其他网站，OnBeforeUnload也会触发。 - EricLaw

有没有办法不显示警告消息？ - Mohammad Faisal

Answer 3

window.onpopstate=function()
{
  alert("Back/Forward clicked!");
}

- Mohsen Haeri

---

如果您访问另一个页面然后返回到此页面，这将不会触发。 - Pacerier

Answer 4

以下是检测后退按钮点击的步骤：

1. 在body上注册mousedown事件：$('body').on('mousedown', 'on all li');
2. 当mousedown事件发生时设置一个变量。
3. 在位置更改时检查此变量。

如果变量更改为true，则表示单击了列表，否则为后退按钮。

这适用于我的用例。此解决方案可能会帮助其他人，因为它依赖于应用程序设计。

- Saurabh Ahuja

---

浏览器的下一个和刷新按钮怎么办？ - aytek

Answer 5

隐藏加载中的提示，可以在页面加载完成或者使用返回按钮时隐藏。

        jQuery(document).ready(function ($) {
            $.minicart.hideLoading();
        });
        window.addEventListener('load', function () {
            jQuery(document).ready(function ($) {
                $.minicart.hideLoading();
            });
        });
        window.onload = function () {
            $.minicart.hideLoading();
        }

- estinamir

Answer 6

在您所浏览的页面上，您可以将此代码片段添加到onLoad事件中，以将它们移回到他们之前所在的页面。

if(history.length>0)history.go(+1)

如果你想要弹出警告框，那就实现它。

if(history.length>0)alert("the user clicked back!")

- Miranda

---

什么都不起作用。即使是全新的页面，history.length > 0也会返回true。它会给你整个历史记录的长度，包括向前和向后的页面。 - Pacerier