Heim > Fragen und Antworten > Hauptteil
P粉6626142132023-08-24 14:20:51
您可以尝试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() 时，就会发生这种情况> 方法以编程方式调用。
event.state 是事件的属性，等于历史状态对象。
对于 jQuery 语法，将其环绕（在文档准备好后添加偶数侦听器）：
(function($) {
// Above code here.
})(jQuery);
另请参阅单页应用程序和 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+ 及类似版本兼容。
P粉9491909722023-08-24 13:12:01
（注意：根据 Sharky 的反馈，我添加了检测退格键的代码）
所以，我经常在 SO 上看到这些问题，并且最近自己也遇到了控制后退按钮功能的问题。经过几天的寻找适合我的应用程序的最佳解决方案（带哈希导航的单页）后，我想出了一个简单的、跨浏览器的、无库的系统来检测后退按钮。
大多数人建议使用：
window.onhashchange = function() {
//blah blah blah
}
但是，当用户使用更改位置哈希的页内元素时，也会调用此函数。当用户点击并且页面向后或向前移动时，这不是最佳的用户体验。
为了向您提供我的系统的总体轮廓，当用户在界面中移动时，我将使用以前的哈希值填充一个数组。它看起来像这样：
function updateHistory(curr) {
window.location.lasthash.push(window.location.hash);
window.location.hash = curr;
}
非常简单。我这样做是为了确保跨浏览器支持以及对旧版浏览器的支持。只需将新的哈希值传递给该函数，它就会为您存储它，然后更改哈希值（然后将其放入浏览器的历史记录中）。
我还利用了一个页内后退按钮，该按钮使用 lasthash 数组在页面之间移动用户。它看起来像这样：
function goBack() {
window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
//blah blah blah
window.location.lasthash.pop();
}
因此，这会将用户移回到最后一个哈希，并从数组中删除最后一个哈希（我现在没有前进按钮）。
所以。如何检测用户是否使用了我的页内后退按钮或浏览器按钮？
起初我查看了window.onbeforeunload，但没有结果——只有当用户要更改页面时才会调用它。在使用哈希导航的单页应用程序中不会发生这种情况。
所以，经过更多的挖掘，我看到了尝试设置标志变量的建议。在我的例子中，这个问题是我会尝试设置它，但由于一切都是异步的，它并不总是针对哈希更改中的 if 语句及时设置。 .onMouseDown 并不总是在 click 中调用，并且将其添加到 onclick 中永远不会足够快地触发它。
从那时起，我开始研究文档和窗口之间的区别。我的最终解决方案是使用 document.onmouseover 设置该标志，并使用 document.onmouseleave 禁用它。
发生的情况是，当用户的鼠标位于文档区域内（读取：渲染的页面，但不包括浏览器框架）时，我的布尔值设置为true。一旦鼠标离开文档区域，布尔值就会翻转为 false。
这样，我可以将 window.onhashchange 更改为：
window.onhashchange = function() {
if (window.innerDocClick) {
window.innerDocClick = false;
} else {
if (window.location.hash != '#undefined') {
goBack();
} else {
history.pushState("", document.title, window.location.pathname);
location.reload();
}
}
}
您会注意到 #undefined 的检查。这是因为如果我的数组中没有可用的历史记录，它将返回 undefined。我用它来询问用户是否想使用 window.onbeforeunload 事件离开。
因此，简而言之，对于不一定使用页内后退按钮或数组来存储历史记录的人来说：
document.onmouseover = function() {
//User's mouse is inside the page.
window.innerDocClick = true;
}
document.onmouseleave = function() {
//User's mouse has left the page.
window.innerDocClick = false;
}
window.onhashchange = function() {
if (window.innerDocClick) {
//Your own in-page mechanism triggered the hash change
} else {
//Browser back button was clicked
}
}
这就是你想要的。一种简单的三部分方法，用于检测后退按钮的使用情况与哈希导航方面的页内元素的情况。
编辑：
为了确保用户不会使用退格键来触发后退事件，您还可以包含以下内容（感谢 这个问题）：
$(function(){
/*
* this swallows backspace keys on any non-input element.
* stops backspace -> back
*/
var rx = /INPUT|SELECT|TEXTAREA/i;
$(document).bind("keydown keypress", function(e){
if( e.which == 8 ){ // 8 == backspace
if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
e.preventDefault();
}
}
});
});