我想用JavaScript看是否有历史记录,后退按钮在浏览器上是否可用。
当前回答
var func = function(){ console.log("do something"); };
if(document.referrer.includes(window.location.hostname) && history.length-1 <= 1){
func();
}
else{
const currentUrl = window.location.href;
history.back();
setTimeout(function(){
currentUrl === window.location.href && func();
}, 100);
}
其他回答
这似乎很管用:
function goBackOrClose() {
window.history.back();
window.close();
//or if you are not interested in closing the window, do something else here
//e.g.
theBrowserCantGoBack();
}
调用history.back(),然后调用window.close()。如果浏览器能够返回历史记录,它将无法到达下一条语句。如果无法返回,就会关闭窗口。
但是,请注意,如果已经通过输入url到达页面,那么firefox不允许脚本关闭窗口。
你不能直接检查后退按钮是否可用。你可以看看历史。长度为>0,但如果在当前页之前还有页,这也是成立的。只有当history.length===0时,才能确定后退按钮不可用。
如果这还不够好,你所能做的就是调用history.back(),如果你的页面之后仍然被加载,返回按钮是不可用的!当然,这意味着如果后退按钮可用,则您刚刚导航离开了页面。你不允许取消onunload中的导航,所以你所能做的就是从onbeforeunload中返回一些东西,这将导致一个恼人的大提示符出现。这不值得。
事实上,用历史做任何事情通常都是一个非常糟糕的主意。历史导航是chrome浏览器,不是网页。添加“返回”链接通常会引起更多用户的困惑,而不是它的价值。
这是我的解决方案:
function historyBack() {
console.log('back');
window.history.back() || window.history.go(-1);
if (!window.history.length) window.close();
var currentUrl = window.location.href;
setTimeout(function(){
// if location was not changed in 100 ms, then there is no history back
if(current === window.location.href){
console.log('History back is empty!');
}
}, 100);
}
function historyForward() {
console.log('forward');
window.history.forward() || window.history.go(+1);
var current = window.location.href;
setTimeout(function(){
// if location was not changed in 100 ms, then there is no history forward
if(current === window.location.href){
console.log('History forward is empty!');
}
}, 100);
}
下面的解决方案将导航回来,并告诉是否发生了导航:
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到目前为止)。