如何检测浏览器后退按钮事件-跨浏览器

(注:根据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和window之间的区别。我的最终解决方案是使用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
}
}

结果出来了。关于哈希导航，一种简单的、由三部分组成的方法来检测后退按钮的使用情况与页面内元素的使用情况。

编辑:

为了确保用户不会使用backspace来触发返回事件，你还可以包括以下内容(感谢@thetoolman on 这个问题):

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

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

你可以尝试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);

参见:窗口。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+和类似的兼容。

我尝试了上面的方法，但是没有一个对我有效。这是解决方案

if(window.event)
{
if(window.event.clientX < 40 && window.event.clientY < 0)
{
alert("Browser back button is clicked...");
}
else
{
alert("Browser refresh button is clicked...");
}
}

更多细节请参考这个链接http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli

浏览器:https://jsfiddle.net/Limitlessisa/axt1Lqoz/

对于移动控制:https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/

$(document).ready(function() {
$('body').on('click touch', '#share', function(e) {
$('.share').fadeIn();
});
});


// geri butonunu yakalama
window.onhashchange = function(e) {
var oldURL = e.oldURL.split('#')[1];
var newURL = e.newURL.split('#')[1];


if (oldURL == 'share') {
$('.share').fadeOut();
e.preventDefault();
return false;
}
//console.log('old:'+oldURL+' new:'+newURL);
}

.share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px;

<!DOCTYPE html>
<html>


<head>
<title>Back Button Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


</head>


<body style="text-align:center; padding:0;">
<a href="#share" id="share">Share</a>
<div class="share" style="">
<h1>Test Page</h1>
<p> Back button press please for control.</p>
</div>
</body>


</html>

以下是我的看法。假设是，当URL更改，但在检测到document内没有单击时，它是浏览器返回(是的，或向前)。用户点击2秒后重置，使其在通过Ajax加载内容的页面上工作:

(function(window, $) {
var anyClick, consoleLog, debug, delay;
delay = function(sec, func) {
return setTimeout(func, sec * 1000);
};
debug = true;
anyClick = false;
consoleLog = function(type, message) {
if (debug) {
return console[type](message);
}
};
$(window.document).click(function() {
anyClick = true;
consoleLog("info", "clicked");
return delay(2, function() {
consoleLog("info", "reset click state");
return anyClick = false;
});
});
return window.addEventListener("popstate", function(e) {
if (anyClick !== true) {
consoleLog("info", "Back clicked");
return window.dataLayer.push({
event: 'analyticsEvent',
eventCategory: 'test',
eventAction: 'test'
});
}
});
})(window, jQuery);

我已经为这个需求挣扎了很长一段时间，并采用了上面的一些解决方案来实现它。然而，我偶然发现，它似乎可以在Chrome、Firefox和Safari浏览器以及Android和iPhone上运行

页面加载:

window.history.pushState({page: 1}, "", "");


window.onpopstate = function(event) {


// "event" object seems to contain value only when the back button is clicked
// and if the pop state event fires due to clicks on a button
// or a link it comes up as "undefined"


if(event){
// Code to handle back button or prevent from navigation
}
else{
// Continue user action through link or button
}
}

如果有帮助请告诉我。如果我错过了什么，我会很高兴去理解。

我通过跟踪触发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)
}

 <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中，导航类型2意味着浏览器的后退或前进按钮被单击，浏览器实际上是从缓存中获取内容。

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

看到这个:

history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};

它工作得很好……

这将肯定工作(用于检测返回按钮点击)

$(window).on('popstate', function(event) {
alert("pop");
});

我能够使用这篇文章中的一些答案和其他人让它在IE和Chrome/Edge中工作。IE11中不支持history.pushState。

if (history.pushState) {
//Chrome and modern browsers
history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event) {
history.pushState(null, document.title, location.href);
});
}
else {
//IE
history.forward();
}

if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
alert('hello world');
}

这是唯一一个解决方案，为我工作(这不是一个一页网站)。 它与Chrome, Firefox和Safari一起工作

正确答案已经在那里了。我想提到新的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);
}

class HistoryNavigation {
static init()
{
if(HistoryNavigation.is_init===true){
return;
}
HistoryNavigation.is_init=true;


let history_stack=[];
let n=0;
let  current_state={timestamp:Date.now()+n};
n++;
let init_HNState;
if(history.state!==null){
current_state=history.state.HNState;
history_stack=history.state.HNState.history_stack;
init_HNState=history.state.HNState;
} else {
init_HNState={timestamp:current_state.timestamp,history_stack};
}
let listenerPushState=function(params){
params=Object.assign({state:null},params);
params.state=params.state!==null?Object.assign({},params.state):{};
let h_state={ timestamp:Date.now()+n};
n++;
let key = history_stack.indexOf(current_state.timestamp);
key=key+1;
history_stack.splice(key);
history_stack.push(h_state.timestamp);
h_state.history_stack=history_stack;
params.state.HNState=h_state;
current_state=h_state;
return params;
};
let listenerReplaceState=function(params){
params=Object.assign({state:null},params);
params.state=params.state!==null?Object.assign({},params.state):null;
let h_state=Object.assign({},current_state);
h_state.history_stack=history_stack;
params.state.HNState=h_state;
return params;
};
let desc=Object.getOwnPropertyDescriptors(History.prototype);
delete desc.constructor;
Object.defineProperties(History.prototype,{


replaceState:Object.assign({},desc.replaceState,{
value:function(state,title,url){
let params={state,title,url};
HistoryNavigation.dispatchEvent('history.state.replace',params);
params=Object.assign({state,title,url},params);
params=listenerReplaceState(params);
desc.replaceState.value.call(this,params.state,params.title,params.url);
}
}),
pushState:Object.assign({},desc.pushState,{
value:function(state,title,url){
let params={state,title,url};
HistoryNavigation.dispatchEvent('history.state.push',params);
params=Object.assign({state,title,url},params);
params=listenerPushState(params);
return desc.pushState.value.call(this, params.state, params.title, params.url);
}
})
});
HistoryNavigation.addEventListener('popstate',function(event){
let HNState;
if(event.state==null){
HNState=init_HNState;
} else {
HNState=event.state.HNState;
}
let key_prev=history_stack.indexOf(current_state.timestamp);
let key_state=history_stack.indexOf(HNState.timestamp);
let delta=key_state-key_prev;
let params={delta,event,state:Object.assign({},event.state)};
delete params.state.HNState;
HNState.history_stack=history_stack;
if(event.state!==null){
event.state.HNState=HNState;
}
current_state=HNState;
HistoryNavigation.dispatchEvent('history.go',params);
});


}
static addEventListener(...arg)
{
window.addEventListener(...arg);
}
static removeEventListener(...arg)
{
window.removeEventListener(...arg);
}
static dispatchEvent(event,params)
{
if(!(event instanceof Event)){
event=new Event(event,{cancelable:true});
}
event.params=params;
window.dispatchEvent(event);
};
}
HistoryNavigation.init();


// exemple


HistoryNavigation.addEventListener('popstate',function(event){
console.log('Will not start because they blocked the work');
});
HistoryNavigation.addEventListener('history.go',function(event){
event.params.event.stopImmediatePropagation();// blocked popstate listeners
console.log(event.params);
// back or forward - see event.params.delta


});
HistoryNavigation.addEventListener('history.state.push',function(event){
console.log(event);
});
HistoryNavigation.addEventListener('history.state.replace',function(event){
console.log(event);
});
history.pushState({h:'hello'},'','');
history.pushState({h:'hello2'},'','');
history.pushState({h:'hello3'},'','');
history.back();


```

我的版本:

const inFromBack = performance && performance.getEntriesByType( 'navigation' ).map( nav => nav.type ).includes( 'back_forward' )

Kotlin/JS (React)的解决方案:

import org.w3c.dom.events.Event
import kotlin.browser.document
import kotlin.browser.window


...
override fun componentDidMount() {
window.history.pushState(null, document.title, window.location.href)
window.addEventListener("popstate", actionHandler)
}
...
val actionHandler: (Event?) -> Unit = {
window.history.pushState(
null,
document.title,
window.location.href
)
// add your actions here
}

正在寻找这个问题的解决方案，并根据这里的一些答案和History.pushState()和WindowEventHandlers.onpopstate的MDN Web文档页面，将一个简单的骨架测试html放在一起。

下面的HTML和JavaScript很容易复制、粘贴和测试。

使用后退和前进浏览器按钮，快捷键，添加对URL的更改(这在某些情况下很重要)。

简单到可以向现有代码中添加关键点，并且应该是可扩展的。

<html>
<body>
<div id="p1">Option 1</div>
<div id="p2">Option 2</div>
<div id="p3">Option 3</div>
<div id="p4">Option 4</div>
<div id="c"></div>
<script>
var chg={
set:function(str){
var d=document.getElementById("c");
d.textContent=str;
},
go:function(e){
var s={"p":this.id};
chg.set(s.p);
hstry.add(s);
}
};
var hstry={
add:function(s){
var u=new URL(window.location);
u.searchParams.set("x",s.p);
window.history.pushState(s,"",u);
},
adjust:function(state){
if(state.p){
chg.set(state.p);
}
}
};
window.onpopstate=function(e){
console.log("popstate, e.state:["+ JSON.stringify(e.state) +"]");
hstry.adjust(e.state);
}
window.onload=function(){
var i,d,a=["p1","p2","p3","p4"];
for(i=0;i<a.length;i++){
d=document.getElementById(a[i]);
d.addEventListener("click",chg.go,false);
}
}
</script>
</body>
</html>