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

Question

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

我们需要迎合不支持HTML5

Answer 1

它是可用的HTML5历史API中的所有浏览器。这个事件被称为'popstate'

Answer 2

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

检测，如果当前页面上的用户按下 “返回” 按钮：

• Is there a way using Jquery to detect the back button being pressed cross browsers
• detect back button click in browser

检测是否访问过当前页面按以往的 “返回” 按钮后（“前进“）页码：

• Is there a cross-browser onload event when clicking the back button?
• trigger event on browser back button click

Answer 3

的如 '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 4

发现这工作得很好跨浏览器和移动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 5

通过以下功能

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 6

在我的情况下，我使用jQuery​​在SPA 更新的DIV禁用链接按钮（单次页面[web]应用程序）。

作为$(window).on('hashchange', ..)事件监听器的新手，这一个事实证明是具有挑战性的，并且花了一些时间进行尝试。由于阅读了很多答案并尝试了不同的变体，最后想出了如何使它按照以下方式工作。据我所知，目前看起来很稳定。

总之 - 每次加载视图时都应该设置变量globalCurrentHash。当$(window).on('hashchange', ..)事件侦听器运行

然后，检查以下内容：

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

我意识到使用全局变量s并不是最优雅的解决方案，但在JS中做事OO对我来说似乎非常棘手。改进/细化的建议肯定赞赏

---

设置：

1. 定义一个全局变量：

var globalCurrentHash = null; 

当致电​​时更新DIV，更新全局变量还有：

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

就绪页面，设置监听检查全局变量，看是否被按下后退按钮：

$(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); 
     } 
    }); 

}); 

Answer 7

在HTML5的情况下，这将诀窍

window.onpopstate = function() { 
    alert("clicked back button"); 
}; history.pushState({}, '');