我想用JavaScript看是否有历史记录，后退按钮在浏览器上是否可用。
当前回答
你不能直接检查后退按钮是否可用。你可以看看历史。长度为>0，但如果在当前页之前还有页，这也是成立的。只有当history.length===0时，才能确定后退按钮不可用。
如果这还不够好，你所能做的就是调用history.back()，如果你的页面之后仍然被加载，返回按钮是不可用的!当然，这意味着如果后退按钮可用，则您刚刚导航离开了页面。你不允许取消onunload中的导航，所以你所能做的就是从onbeforeunload中返回一些东西，这将导致一个恼人的大提示符出现。这不值得。
事实上，用历史做任何事情通常都是一个非常糟糕的主意。历史导航是chrome浏览器，不是网页。添加“返回”链接通常会引起更多用户的困惑，而不是它的价值。
其他回答
我是这样做的。
我使用'beforeunload'事件来设置一个布尔值。然后我设置了一个超时来观察“beforeunload”是否被触发。
var $window = $(window),
$trigger = $('.select_your_link'),
fallback = 'your_fallback_url';
hasHistory = false;
$window.on('beforeunload', function(){
hasHistory = true;
});
$trigger.on('click', function(){
window.history.go(-1);
setTimeout(function(){
if (!hasHistory){
window.location.href = fallback;
}
}, 200);
return false;
});
似乎在主要的浏览器(测试FF, Chrome, IE11到目前为止)。
还有另一个近乎完美的解决方案，来自于另一个SO答案:
if( (1 < history.length) && document.referrer ) {
history.back();
}
else {
// If you can't go back in history, you could perhaps close the window ?
window.close();
}
有人报告说，当使用target="_blank"时，它不工作，但它似乎在Chrome上为我工作。
我正在使用Angular，我需要检查是否有历史记录，触发location.back()，否则重定向到父路由。
来自https://stackoverflow.com/a/69572533/18856708的解决方案效果很好。
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
private location: Location,
}
...
back(): void {
if (window.history.state === null) {
this.router.navigate(['../'], { relativeTo: this.activatedRoute });
return;
}
this.location.back();
}
我使用了一点PHP来实现这个结果。不过有点生锈了。但它应该会起作用。
<?php
function pref(){
return (isset($_SERVER['HTTP_REFERER'])) ? true : '';
}
?>
<html>
<body>
<input type="hidden" id="_pref" value="<?=pref()?>">
<button type="button" id="myButton">GoBack</button>
<!-- Include jquery library -->
<script>
if (!$('#_pref').val()) {
$('#myButton').hide() // or $('#myButton').remove()
}
</script>
</body>
</html>
这可能会有帮助:
const prev = window.location.pathname;
window.history.back();
setTimeout(() => {
if (prev === window.location.pathname) {
// Do something else ...
}
}, 1000);
