How can I create a back/forward button?

Question

I'm trying to make both back and forward buttons for my website. Actually I want to follow this . So first of all, I need to check whether do window.history.back(); and window.history.forward(); exist? if yes, then show their buttons and set a href attribute for them.

function creat_back_forward_btn(){
    if ( window.history.back() ) {
        $('.back_btn').show(); // in first, the button is hidden (by CSS)
        var previous_page = window.history.back();
        $('.back_btn').attr('href', previous_page );   
    } 

    if ( window.history.forward() ) {
        $('.forward_btn').show(); // in first, the button is hidden (by CSS)
        var next_page = window.history.forward();
        $('.forward_btn').attr('href', next_page );    
    } 
}

creat_back_forward_btn();  // on load

And then, I will use those buttons like this:

$('.back_btn, .forward_btn').on('click', function() {
    var page = $(this).attr('href');
    location.href=page
});

But my code doesn't work as expected, I mean I even cannot open my website. It will be redirected somewhere without clicking on anything. How can I fix it?

Answer 1

Try This:

function creat_back_forward_btn(){
    if ( window.history.length > 0 ) {
        $('.back_btn').show().on("click", function(){
            window.history.back();
        }); 

        $('.forward_btn').show().on("click", function(){
            window.history.forward();
        });
    } 
}

creat_back_forward_btn();  // on load

Answer 2

To check whether the function exists, you are using:

if (window.history.back())

This executes the method. You should instead use:

if (window.history.back)

which returns a true value if it is available.

Finally, you need to create a function or anonymous function that calls the method and bind that to the href attribute, instead of executing the method and assigning the return value to a variable. Like so:

var previous_page = function () { window.history.back() };
$('.back_btn').attr('href', previous_page );

Answer 3

Try something like this

if ( window.history.back() ) {
    $('.back_btn').show(); // in first, the button is hidden (by CSS)
    var previous_page = window.history.back(-1);
    $('.back_btn').attr('href', previous_page );   
} 

if ( window.history.forward() ) {
    $('.forward_btn').show(); // in first, the button is hidden (by CSS)
    var next_page = window.history.forward(+1);
    $('.forward_btn').attr('href', next_page );    
} 
}

creat_back_forward_btn();  // on load

Answer 4

There are several problems with your code. First one is that, the way you are checking if the there is an function window.history.back() will cause the execution of that function, so the browser goes back in the history immediately. To check for the function presence you can use this code:

typeof(window.history.back) === "function"

However, this will only tell if the function is there, not if there is something in the browser history. Actually you can not check how many records are in the browser history, because it is an security issue. You can handle event popstate together with methods pushState and replaceState to react to the history change. However, if you imagine the situation that you open the browser window with some page A , than navigate to your page B , there will be a record in the browser history and you will be able to navigate back to A using browser buttons, but you will not be able to detect in your page B that there is a place to go back.