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

Posted

技术标签:

【中文标题】如何检测用户是不是点击了“返回”按钮【英文标题】:How to detect if the user clicked the "back" button如何检测用户是否点击了“返回”按钮 【发布时间】:2011-01-01 19:15:18 【问题描述】:

当用户返回 history-back-1 时...我如何检测到它?然后,提示“用户点击了返回!”

使用绑定(最好使用 jQuery)

【问题讨论】:

Alex,你刚刚在***.com/questions/2008765/…Don't spam 上问了一个类似的问题。 In javascript, preferably JQuery, how do I add something to the URL when the user clicks "back" button in the browser?的可能重复 【参考方案1】:

您通常不能(浏览器安全限制)。您可以判断用户是否离开页面(onbeforeunload、onunload fire),但您无法判断他们去了哪里,除非您已将页面设置为允许这样做。

html5 引入了 HTML5 History API;在符合标准的浏览器中,如果用户导航回您网站上较早的“页面”,onpopstate 事件将触发。

【讨论】:

这个怎么样? ***.com/questions/10462511/… 您可以以可检测到回击的方式构建页面,但您可以知道它们去了哪里的唯一方法是它们是否碰巧导航到您网站上的另一个页面(您可以控制 JavaScript )。如何构建这样的场景?当用户访问“PageA.htm”时,您立即将他们发送到“PageB.htm”,如果他们再次加载“PageA.htm”,您可以“猜测”他们点击了“返回”。【参考方案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;

【讨论】:

OnBeforeUnload 如果用户转到其他站点也会触发。 有什么办法不显示警告信息?【参考方案3】:
window.onpopstate=function()

  alert("Back/Forward clicked!");

【讨论】:

如果您访问另一个页面然后返回此页面,这不会触发。【参考方案4】:

以下是检测返回按钮点击的步骤

    在 body $('body').on('mousedown' ,'on all li' ); 上注册鼠标按下事件

    2.现在在 mousedown 事件发生时设置一个变量。

    3.当你的位置改变时检查这个变量。

如果变量更改为 true,则表示列表单击,否则返回按钮

这适用于我的用例。此解决方案可能对其他人有所帮助,因为它取决于应用程序设计

【讨论】:

【参考方案5】:

在您正在查看的页面上,您可以将这段代码添加到onLoad 事件中,以将它们移回他们所在的页面。

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

如果你想要警报,那就做吧

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

【讨论】:

对任何事情都不起作用。 history.length > 0 会给你真实的,即使它是一个全新的页面。它为您提供entire length of history包括向后和向前页面。

以上是关于如何检测用户是不是点击了“返回”按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何检测是不是按下了向上按钮

android如何返回上一个界面

如何知道react-router是不是可以返回以在react app中显示后退按钮

如何通过点击“返回”按钮来防止用户查看以前用户的信息[重复]

检测页面是否发生变化

如何使用角度检测浏览器后退按钮单击事件?