您如何确定地检测用户是否在浏览器中按下了后退按钮?
如何使用#URL系统在单页web应用程序中强制使用页面内返回按钮?
为什么浏览器的后退按钮不触发它们自己的事件!?
您如何确定地检测用户是否在浏览器中按下了后退按钮?
如何使用#URL系统在单页web应用程序中强制使用页面内返回按钮?
为什么浏览器的后退按钮不触发它们自己的事件!?
当前回答
浏览器会发出popstate事件,如果你通过你的应用程序调用导航
window.history.pushState({},'','/to')
如果您手动在地址栏中输入地址并单击后退按钮,popstate事件将不会被触发。
如果你用这个简化的功能在应用中导航
const navigate = (to) => {
window.history.pushState({}, ",", to);
};
这样就可以了
const handlePopstate = () => {
console.log("popped");
};
window.addEventListener("popstate", handlePopstate);
其他回答
看到这个:
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
它工作得很好……
<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
}
});
上面的代码对我有用。在移动浏览器上,当用户单击后退按钮时,我们希望恢复页面状态与他上次访问时相同。
该文档。鼠标悬停不适用于IE和FireFox。 但是我试过了:
$(document).ready(function () {
setInterval(function () {
var $sample = $("body");
if ($sample.is(":hover")) {
window.innerDocClick = true;
} else {
window.innerDocClick = false;
}
});
});
window.onhashchange = function () {
if (window.innerDocClick) {
//Your own in-page mechanism triggered the hash change
} else {
//Browser back or forward button was pressed
}
};
这适用于Chrome和IE,而不是FireFox。仍在努力完善FireFox。任何检测浏览器后退/前进按钮点击的简单方法都是受欢迎的,尤其是在JQuery中,也包括AngularJS或纯Javascript。
正确答案已经在那里了。我想提一下新的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+和类似的兼容。