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

Question

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

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

score 65 · Accepted Answer

'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

score 14 · Accepted Answer

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

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

score 10 · Accepted Answer

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

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

在上一个（“前进”）页面上按“后退”按钮后检测当前页面是否被访问：

score 8 · Accepted Answer

发现这可以很好地跨浏览器和移动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);

score 6 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

您需要做的就是编写此代码

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

最好的

score 1 · Accepted Answer

就我而言，我使用 jQuery.load()来更新 SPA （单页 [web] 应用程序）中的 DIV 。

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

总之 -globalCurrentHash每次加载视图时都应该设置一个变量。

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

如果location.hash具有相同的值，则表示前进

如果location.hash具有不同的值，则表示返回

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

设置：

定义一个全局变量：

    var globalCurrentHash = null;

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

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

在页面准备就绪时，设置侦听器以检查全局 var 以查看是否按下了后退按钮：

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

});

score 0 · Accepted Answer

0

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

于 2013-07-11T13:18:31.793 回答

score 0 · Accepted Answer

通过以下功能禁用 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;
            }
        };
    }
};

score 0 · Accepted Answer

Hasan Badshah的回答对我有用，但该方法将被弃用，并且可能对其他人造成问题。遵循 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 中不受支持，但在完成时可能会发生变化。检查文档以获取更新。

score -2 · Accepted Answer

假设你有一个按钮：

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

这里是 backBtn 方法的代码：

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

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

11 回答 11

Related

Reference