JavaScript或jQuery浏览器后退button点击检测器

有人可以分享经验/代码我们如何检测浏览器后退button点击（对于任何types的浏览器）？

我们需要迎合所有不支持HTML5的浏览器

Answer 1

'popstate'事件只在你以前推动某些东西时才起作用。 所以你必须做这样的事情：

jQuery(document).ready(function($) { if (window.history && window.history.pushState) { window.history.pushState('forward', null, './#forward'); $(window).on('popstate', function() { alert('Back button was pressed.'); }); } }); 

对于浏览器的向后兼容性，我推荐： history.js

Answer 2

有很多方法可以检测用户是否点击了后退button。 但是一切都取决于你的需求。 尝试探索下面的链接，他们应该帮助你。

检测用户是否按下了当前页面上的“返回”button：

• 有没有一种方式使用jquery来检测后退button跨浏览器
• 在浏览器中检测返回button点击

按前一页（“转发”）页面上的“返回”button后，检测当前页面是否被访问：

• 单击后退button时是否存在跨浏览器onload事件？
• 在浏览器上点击后触发事件

Answer 3

发现这个工作很好，跨浏览器和移动back_button_override.js 。

（增加了Safari 5.0的计时器）

 // managage back button click (and backspace) var count = 0; // needed for safari window.onload = function () { if (typeof history.pushState === "function") { history.pushState("back", null, null); window.onpopstate = function () { history.pushState('back', null, null); if(count == 1){window.location = 'your url';} }; } } setTimeout(function(){count = 1;},200); 

Answer 4

通过以下function禁用urlbutton

 window.onload = function () { if (typeof history.pushState === "function") { history.pushState("jibberish", null, null); window.onpopstate = function () { history.pushState('newjibberish', null, null); // Handle the back (or forward) buttons here // Will NOT handle refresh, use onbeforeunload for this. }; } else { var ignoreHashChange = true; window.onhashchange = function () { if (!ignoreHashChange) { ignoreHashChange = true; window.location.hash = Math.random(); // Detect and redirect change here // Works in older FF and IE9 // * it does mess with your hash symbol (anchor?) pound sign // delimiter on the end of the URL } else { ignoreHashChange = false; } }; } }; 

Answer 5

它在HTML5 History API中可用。 这个事件被称为'popstate'

Answer 6

在我的情况下，我正在使用jQuery .load()更新SPA （单页[网页]应用程序）中的 DIV。

作为新的与$(window).on('hashchange', ..)事件监听器的工作，这一个被certificate是具有挑战性的，并采取了一些破解。 感谢读了很多答案，并尝试不同的变化，终于想出了如何使其工作在以下方式。 据我所知，目前看起来稳定。

总之 – 每次加载视图时都应该设置variablesglobalCurrentHash 。

然后当$(window).on('hashchange', ..)事件侦听器运行时，它会检查以下内容：

• 如果location.hash具有相同的值，则意味着前进
• 如果location.hash具有不同的值，则意味着回头

我意识到使用全局variables并不是最优雅的解决scheme，但在JS中做事OO似乎对我来说非常棘手。 改善/改进的build议当然受到赞赏

---

build立：

1. 定义一个全局variables：

  var globalCurrentHash = null; 

2. 当调用.load()来更新DIV时，也要更新全局variables：

    function loadMenuSelection(hrefVal) { $('#layout_main').load(nextView); globalCurrentHash = hrefVal; } 

3. 在页面准备好之后，设置监听器来检查全局variables，看看是否按下了“返回button”：

    $(document).ready(function(){ $(window).on('hashchange', function(){ console.log( 'location.hash: ' + location.hash ); console.log( 'globalCurrentHash: ' + globalCurrentHash ); if (location.hash == globalCurrentHash) { console.log( 'Going fwd' ); } else { console.log( 'Going Back' ); loadMenuSelection(location.hash); } }); });