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

Question

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

我们需要满足所有不支持 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

在 javascript 中，导航类型 2 表示单击了浏览器的后退或前进按钮，并且浏览器实际上正在从缓存中获取内容。

if(performance.navigation.type == 2) {
    //Do your code here
}

Answer 3

有很多方法可以检测用户是否单击了“返回”按钮。但是一切都取决于您的需求。尝试浏览下面的链接，它们应该会对您有所帮助。

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

• 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 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

在 HTML5 的情况下，这可以解决问题

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

Answer 6

你可以使用这个很棒的插件

https://github.com/ianrogren/jquery-backDetect

你需要做的就是写这段代码

  $(window).load(function(){
    $('body').backDetect(function(){
      // Callback function
      alert("Look forward to the future, not the past!");
    });
  });

最好的

Answer 7

在我的例子中，我使用 jQuery .load() 来更新 SPA (single page [web] app) 中的 DIV。

刚开始使用 $(window).on('hashchange', ..) 事件侦听器，这被证明具有挑战性，并且需要一些时间来破解。由于阅读了很多答案并尝试了不同的变化，终于弄清楚了如何使其以下列方式工作。据我所知，到目前为止它看起来很稳定。

总而言之 - 每次加载视图时都应设置变量 globalCurrentHash。

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

• 如果location.hash 的值相同，则表示前进
• 如果location.hash 的值不同，则表示返回

我意识到使用全局变量并不是最优雅的解决方案，但是到目前为止，在 JS 中做面向对象的事情对我来说似乎很棘手。改进/改进的建议当然值得赞赏

---

设置：

1. 定义一个全局变量：

    var globalCurrentHash = null;

1. 调用.load() 更新DIV 时，也要更新全局变量：

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

2. 在页面准备就绪时，设置监听器以检查全局变量以查看是否按下了返回按钮：

   $(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 8

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

Answer 9

通过以下功能禁用url按钮

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 10

Hasan Badshah 的answer 为我工作，但该方法将被弃用，并且可能对其他人造成问题。遵循 MDN 网络文档关于替代方法，我登陆这里：PerformanceNavigationTiming.type

if (performance.getEntriesByType("navigation")[0].type === 'back_forward') {
  // back or forward button functionality
}

这并不能直接解决后退按钮而不是前进按钮的问题，但足以满足我的需要。在文档中，他们详细介绍了可能有助于解决您的特定需求的可用事件数据：

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - 
    p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - 
    p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}

根据本文发布时的文档，它仍处于工作草案状态，不支持 IE 或 Safari，但在完成时可能会发生变化。检查文档以获取更新。

Answer 11

假设你有一个按钮：

<button onclick="backBtn();">Back...</button>

这里是backBtn方法的代码：

  function backBtn(){
                    parent.history.back();
                    return false;
                }