您如何确定地检测用户是否在浏览器中按下了后退按钮?
如何使用#URL系统在单页web应用程序中强制使用页面内返回按钮?
为什么浏览器的后退按钮不触发它们自己的事件!?
当前回答
我已经为这个需求挣扎了很长一段时间，并采用了上面的一些解决方案来实现它。然而，我偶然发现，它似乎可以在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
}
}
如果有帮助请告诉我。如果我错过了什么，我会很高兴去理解。
其他回答
if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
alert('hello world');
}
这是唯一一个解决方案，为我工作(这不是一个一页网站)。 它支持Chrome、Firefox和Safari浏览器。
我尝试了上面的方法，但是没有一个对我有效。这是解决方案
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
正在寻找这个问题的解决方案，并根据这里的一些答案和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>
正确答案已经在那里了。我想提一下新的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);
}
我的版本:
const inFromBack = performance && performance.getEntriesByType( 'navigation' ).map( nav => nav.type ).includes( 'back_forward' )
