我想使用 JavaScript 来查看是否有历史记录,我的意思是浏览器上的后退按钮是否可用。
如何检查用户是否可以返回浏览器历史记录
简短的回答:你不能。
从技术上讲,有一种准确的方法,即检查属性:
history.previous
但是,它不会起作用。这样做的问题是,在大多数浏览器中,这被视为违反安全性,通常只返回undefined。
history.length
是一个属性,其他人已经建议......
但是,长度不完全,因为它并不表示工作地方在历史上你。此外,它并不总是从相同的数字开始。例如,一个没有设置登陆页面的浏览器从 0 开始,而另一个使用登陆页面的浏览器将从 1 开始。
大多数情况下,会添加一个链接,调用:
history.back();
或者
history.go(-1);
如果您无法返回,那么单击该链接将无济于事。
还有另一种检查方法 - 检查推荐人。第一个页面通常会有一个空的引用...
if (document.referrer == "") {
window.close()
} else {
history.back()
}
我的代码让浏览器返回一页,如果失败,它会加载一个后备 url。它还检测主题标签的变化。
当后退按钮不可用时,回退 url 将在 500 毫秒后加载,因此浏览器有足够的时间加载上一页。立即加载回退 urlwindow.history.go(-1);
会导致浏览器使用回退 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);
}
这是我如何做到的。
我使用'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)。
我在我的项目中使用了一个片段:
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来管理浏览器历史记录。
为什么要将 history.length 与数字 2 进行比较?
因为 Chrome 的起始页被视为浏览器历史记录中的第一项。
history.length
用户行为的可能性很少:
- 用户在浏览器中打开新的空标签,然后运行一个页面。
history.length = 2
我们想back()
在这种情况下禁用,因为用户将转到空选项卡。 - 用户通过单击之前某处的链接在新选项卡中打开页面。
history.length = 1
我们再次想禁用back()
方法。 - 最后,用户在重新加载几页后登陆当前页面。
history.length > 2
现在back()
可以启用了。
注意:当用户在没有target="_blank"
.
注 2: document.referrer
当您通过键入地址打开网站以及网站使用 ajax 加载子页面时为空,因此我在第一种情况下不再检查此值。