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?

You're assigning the result of `window.history.back()` to the variable `previous_page` when the code is first run. That means the method is executed, and you're sent back a page. What you should do, is assign a function *calling* `window.history.back()` inside of it to `previous_page`. — Ivo Coumans, Sep 05 '16 at 12:42
`window.history.back` is a function not a boolean.. and you're executing it when you do `if ( window.history.back() ) {` — pumpkinzzz, Sep 05 '16 at 12:43
can't you just use `$('.back_btn').click(function(){window.history.back()})` ? — Akshay, Sep 05 '16 at 12:45

Mateusz Klimentowicz · Answer 1 · 2016-09-05T12:58:45.273

0

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

edited Sep 05 '16 at 12:58

answered Sep 05 '16 at 12:45

Mateusz Klimentowicz

659
6
23

This still executes the back/forward methods inside the if statements. – Ivo Coumans Sep 05 '16 at 12:47
It executes the navigation methods inside the if statements – xxxmatko Sep 05 '16 at 12:52
thanks I changed the if statement. Its diffcult to check if there are possiblity to get back or forward - http://stackoverflow.com/questions/3588315/how-to-check-if-the-user-can-go-back-in-browser-history-or-not – Mateusz Klimentowicz Sep 05 '16 at 12:59

score 0 · Answer 2 · answered Sep 05 '16 at 12:46

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

score 0 · Answer 3 · answered Sep 05 '16 at 12:47

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

score 0 · Answer 4 · answered Sep 05 '16 at 12:49

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.

How can I create a back/forward button?

4 Answers4

Linked