我想用JavaScript看是否有历史记录，后退按钮在浏览器上是否可用。
当前回答
浏览器有后退和前进按钮。我想出了这个问题的解决办法。但它会影响浏览器的转发操作，并导致一些浏览器的错误。
它的工作原理是这样的:如果浏览器打开一个从未打开过的新url，历史。长度会变长。
你可以改变哈希值
location.href = '#__transfer__' + new Date().getTime()
要得到一个从未显示的url，然后历史。长度会得到真正的长度。
var realHistoryLength = history.length - 1
但是，它并不总是工作得很好，我不知道为什么，特别是当url自动跳转很快。
其他回答
我在我的项目中使用了一个片段:
function back(url) {
if (history.length > 2) {
// if history is not empty, go back:
window.History.back();
} else if (url) {
// go to specified fallback url:
window.History.replaceState(null, null, url);
} else {
// go home:
window.History.replaceState(null, null, '/');
}
}
供参考:我使用history. js来管理浏览器历史。
为什么要比较历史。2的长度?
因为Chrome的开始页面是浏览器历史记录中的第一项。
历史的可能性很少。长度和用户行为:
用户在浏览器中打开新的空选项卡，然后运行一个页面。历史。Length = 2，在这种情况下我们要禁用back()，因为user将转到空选项卡。 用户在新选项卡中通过单击前面某处的链接打开页面。历史。Length = 1，同样我们要禁用back()方法。 最后，用户登陆当前页面后重新加载几个页面。历史。长度> 2和now back()可以启用。
注意:当用户点击外部网站的链接后，没有target="_blank"时，我省略了大小写。
注2:文件。referrer是空的，当你打开网站输入它的地址，也当网站使用ajax加载子页面，所以我停止检查这个值在第一种情况下。
我使用了一点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>
下面的解决方案将导航回来，并告诉是否发生了导航:
async function goBack() {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => reject('nowhere to go'), 100);
window.history.back();
const onBack = () => {
window.removeEventListener('beforeunload', onBack);
window.removeEventListener('popstate', onBack);
clearTimeout(timer);
resolve(true);
};
window.addEventListener('beforeunload', onBack);
window.addEventListener('popstate', onBack);
});
}
// usage
await goBack().catch(err => console.log('failed'));
工作原理:
试着导航回去 添加事件监听器，在导航到另一个网站或同一网站上的另一个页面时触发(SPA网站等) 如果上述事件在100毫秒内没有发生，就可以推断出没有地方可以回去
注意goBack()是一个异步函数。
我是这样做的。
我使用'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到目前为止)。
我不确定这是否有效，它完全未经测试，但试试这个:
<script type="text/javascript">
function goBack() {
history.back();
}
if (history.length > 0) { //if there is a history...
document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
} else {
die();
}
</script>
在HTML的某处:
<button value="Button1"> //These buttons have no action
<button value="Button2">
编辑:
您还可以研究哪些浏览器支持back函数(我认为它们都支持)，并使用本页中找到并详细描述的标准JavaScript浏览器检测对象。然后你可以有2个不同的页面:一个是兼容后退按钮的“好浏览器”页面，一个是告诉他们更新浏览器的“坏浏览器”页面
