我想用JavaScript看是否有历史记录，后退按钮在浏览器上是否可用。
当前回答
我正在使用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();
}
其他回答
var fallbackUrl = "home.php";
if(history.back() === undefined)
window.location.href = fallbackUrl;
我使用了一点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>
我想出了以下方法。它利用onbeforeunload事件来检测浏览器是否开始离开页面。如果在一定时间内没有，它就会重定向到备用。
var goBack = function goBack(fallback){
var useFallback = true;
window.addEventListener("beforeunload", function(){
useFallback = false;
});
window.history.back();
setTimeout(function(){
if (useFallback){ window.location.href = fallback; }
}, 100);
}
您可以使用goBack("fallback.example.org")调用此函数。
我的代码让浏览器返回一个页面，如果失败，它加载一个回退url。它还可以检测标签的变化。
当后退按钮不可用时，回退url将在500毫秒后加载，这样浏览器就有足够的时间加载上一页。在window.history.go(-1)之后加载回退url;会导致浏览器使用回退url，因为js脚本还没有停止。
function historyBackWFallback(fallbackUrl) {
fallbackUrl = fallbackUrl || '/';
var prevPage = window.location.href;
window.history.go(-1);
setTimeout(function(){
if (window.location.href == prevPage) {
window.location.href = fallbackUrl;
}
}, 500);
}
解决方案
'use strict';
function previousPage() {
if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
window.history.back();
}
}
解释
window.location.pathname会给你当前的URI。例如，https://domain/question/1234/i-have-a-problem会给出/question/1234/i-have-a-problem。请参阅有关窗口的文档。获取更多信息的位置。
接下来，调用split()将为我们提供该URI的所有片段。所以如果我们使用我们之前的URI，我们将会有像[""，"question"， "1234"， "i-have-a-problem"]这样的东西。有关更多信息，请参阅有关String.prototype.split()的文档。
这里调用filter()来过滤掉由反斜杠生成的空字符串。它基本上只返回长度大于1的URI片段(非空字符串)。所以我们会有像["question"， "1234"， "i-have-a-question"]这样的东西。这可以写成这样:
'use strict';
window.location.pathname.split('/').filter(function(fragment) {
return fragment.length > 0;
});
有关更多信息，请参阅关于Array.prototype.filter()和析构赋值的文档。
现在，如果用户在https://domain/上尝试返回，我们不会触发if语句，也不会触发window.history.back()方法，这样用户就会留在我们的网站中。这个URL将等价于长度为0的[]，0 > 0为假值。因此，默默的失败。当然，如果您愿意，您可以记录一些内容或其他操作。
'use strict';
function previousPage() {
if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
window.history.back();
} else {
alert('You cannot go back any further...');
}
}
限制
当然，如果浏览器不支持History API，这个解决方案将不起作用。在使用此解决方案之前，请查看文档以了解更多信息。
