How to check if the user can go back in browser history or not

Solution 1:

Short answer: You can't.

Technically there is an accurate way, which would be checking the property:

history.previous

However, it won't work. The problem with this is that in most browsers this is considered a security violation and usually just returns undefined.

history.length

Is a property that others have suggested...
However, the length doesn't work completely because it doesn't indicate where in the history you are. Additionally, it doesn't always start at the same number. A browser not set to have a landing page, for example, starts at 0 while another browser that uses a landing page will start at 1.

Most of the time a link is added that calls:

history.back();

or

 history.go(-1);

and it's just expected that if you can't go back then clicking the link does nothing.

Solution 2:

There is another way to check - check the referrer. The first page usually will have an empty referrer...

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

Solution 3:

My code let the browser go back one page, and if that fails it loads a fallback url. It also detect hashtags changes.

When the back button wasn't available, the fallback url will be loaded after 500 ms, so the browser has time enough to load the previous page. Loading the fallback url right after window.history.go(-1); would cause the browser to use the fallback url, because the js script didn't stop yet.

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);
}

Solution 4:

Here is how i did it.

I used the 'beforeunload' event to set a boolean. Then I set a timeout to watch if the 'beforeunload' fired.

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;
});

Seems to work in major browsers (tested FF, Chrome, IE11 so far).

Solution 5:

There is a snippet I use in my projects:

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, '/');
    }
}

FYI: I use History.js to manage browser history.

Why to compare history.length to number 2?

Because Chrome's startpage is counted as first item in the browser's history.

There are few possibilities of history.length and user's behaviour:

• User opens new empty tab in the browser and then runs a page. history.length = 2 and we want to disable back() in this case, because user will go to empty tab.
• User opens the page in new tab by clicking a link somewhere before. history.length = 1 and again we want to disable back() method.
• And finally, user lands at current page after reloading few pages. history.length > 2 and now back() can be enabled.

Note: I omit case when user lands at current page after clicking link from external website without target="_blank".

Note 2: document.referrer is empty when you open website by typing its address and also when website uses ajax to load subpages, so I discontinued checking this value in the first case.