您如何确定地检测用户是否在浏览器中按下了后退按钮?

如何使用#URL系统在单页web应用程序中强制使用页面内返回按钮?

为什么浏览器的后退按钮不触发它们自己的事件!?


当前回答

正确答案已经在那里了。我想提一下新的JavaScript API PerformanceNavigationTiming,它取代了过时的performance。navigation。

下面的代码将登录控制台“back_forward”如果用户登陆到您的页面使用后退或前进按钮。在项目中使用兼容性表之前,请先查看兼容性表。

var perfEntries = performance.getEntriesByType("navigation");
for (var i = 0; i < perfEntries.length; i++) {
    console.log(perfEntries[i].type);
}

其他回答

 <input style="display:none" id="__pageLoaded" value=""/>


 $(document).ready(function () {
        if ($("#__pageLoaded").val() != 1) {

            $("#__pageLoaded").val(1);


        } else {
            shared.isBackLoad = true;
            $("#__pageLoaded").val(1);  

            // Call any function that handles your back event

        }
    });

上面的代码对我有用。在移动浏览器上,当用户单击后退按钮时,我们希望恢复页面状态与他上次访问时相同。

正确答案已经在那里了。我想提一下新的JavaScript API PerformanceNavigationTiming,它取代了过时的performance。navigation。

下面的代码将登录控制台“back_forward”如果用户登陆到您的页面使用后退或前进按钮。在项目中使用兼容性表之前,请先查看兼容性表。

var perfEntries = performance.getEntriesByType("navigation");
for (var i = 0; i < perfEntries.length; i++) {
    console.log(perfEntries[i].type);
}

你可以尝试popstate事件处理程序,例如:

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

注意:为了获得最佳结果,您应该只在希望实现逻辑的特定页面上加载此代码,以避免任何其他意外问题。

每当当前历史记录项更改(用户导航到新状态)时,就会触发popstate事件。当用户单击浏览器的后退/前进按钮时,或者当以编程方式调用history.back()、history.forward()、history.go()方法时,就会发生这种情况。

该事件。状态是事件的属性,等于历史状态对象。

对于jQuery语法,将它环绕起来(在文档准备好后添加监听器):

(function($) {
  // Above code here.
})(jQuery);

参见:window。Onpopstate页面加载


参见单页应用程序和HTML5 pushState页面的示例:

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

这应该与Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+和类似的兼容。

在javascript中,导航类型2意味着浏览器的后退或前进按钮被点击,浏览器实际上是从缓存中获取内容。

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

我通过跟踪触发hashchange的原始事件(无论是滑动、单击还是滚动)来解决这个问题,这样事件就不会被误认为是简单的页面登陆,并在每个事件绑定中使用一个额外的标志。当点击后退按钮时,浏览器不会再次将标志设置为false:

var evt = null,
canGoBackToThePast = true;

$('#next-slide').on('click touch', function(e) {
    evt = e;
    canGobackToThePast = false;
    // your logic (remember to set the 'canGoBackToThePast' flag back to 'true' at the end of it)
}