如何检查用户是否可以返回浏览器历史记录

Question

我想用JavaScript来查看是否有历史记录,我的意思是如果浏览器上有后退按钮可用.

Answer 1

简答:你做不到.

从技术上讲,有一种准确的方法,即检查财产:

history.previous

但是,它不会起作用.这样做的问题是,在大多数浏览器中,这被认为是安全违规,通常只返回undefined.

history.length

那是其他人所说的属性......
然而,长度不完全,因为它并不表示工作的地方在你的历史.此外,它并不总是以相同的数字开头.例如,未设置为具有登录页面的浏览器从0开始,而使用朗读页面的另一浏览器将从1开始.

大多数情况下,添加了一个调用的链接:

history.back();

要么

 history.go(-1);

并且只是期望如果你不能回去,那么点击链接什么都不做.

Answer 2

还有另一种检查方法 - 检查推荐人.第一页通常会有一个空的推荐人......

if (document.referrer == "") {
    window.close()
} else {
    history.back()
}

Answer 3

我的代码让浏览器返回一页,如果失败则加载一个后备网址.它还检测主题标签的更改.

当后退按钮不可用时,后退网址将在500毫秒后加载,因此浏览器有足够的时间加载上一页.之后加载后备网址window.history.go(-1);会导致浏览器使用后备网址,因为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);
}

Answer 4

这似乎可以解决问题:

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不会允许脚本关闭窗口.

Answer 5

您无法直接检查后退按钮是否可用.您可以查看history.length>0,但如果当前页面前面还有页面,则会成立.您只能确定后退按钮何时无法使用history.length===0.

如果这还不够好,那么您可以做的就是打电话history.back(),如果之后仍然加载了您的页面,则后退按钮不可用!当然,这意味着如果后退按钮是可用的,你刚刚导航离开页面.你不能取消导航onunload,所以你要做的就是停止实际发生的事情就是从中返回一些东西onbeforeunload,这会导致出现一个很大的烦人提示.这不值得.

事实上,对历史做任何事情通常都是一个非常糟糕的想法.历史导航适用于浏览器镶边,而不适用于网页.添加"返回"链接通常会导致更多用户混淆而不是值得.

Answer 6

我是怎么做到的.

我使用'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).

Answer 7

我在我的项目中使用了一个片段:

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加载子页面时,它是空的,所以我在第一种情况下停止检查此值.

Answer 8

请注意，window.history.length因为它还包含window.history.forward()

因此，您可能有window.history.length多个条目，但没有历史记录后退条目。这意味着如果您开火，什么也不会发生window.history.back()

Answer 9

history.length是没用的,因为它没有显示用户是否可以回溯历史.不同的浏览器也使用初始值0或1 - 它取决于浏览器.

工作解决方案是使用$(window).on('beforeunload'事件,但我不确定如果通过ajax加载页面并使用pushState更改窗口历史记录它将起作用.

所以我使用了下一个解决方案:

var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
    // if location was not changed in 100 ms, then there is no history back
    if(currentUrl === window.location.href){
        // redirect to site root
        window.location.href = '/';
    }
}, 100);