Back button fails after window.location.replace(href);

Question

I made simple function which makes all container behave like link ("a" element).

function allHot(element){
$(element)
.click(
    function(){
    var href = $(this).find('a').attr('href');
    window.location.replace(href);
})

.hover(
    function(){
    $(this).css({'text-shadow' : '0px 1px 0px #D6D6D6'});
    },
    function(){
    $(this).css({'text-shadow' : 'none'});
    }

);
}

Function works great. Instead of clicking the "more" button, user can click everywhere on container and is properly redirected.

However, if user after redirection clicks back button, browser goes back two steps instead of one as it should. What's more weird, history looks OK.

Simple scheme to better description:

Page1 -> Page2

Page2 [user clicks on "allHot" container] -> allHot redirects to Page3

Page3 [user clicks on browser back button] -> Page1

This is major bug for website I'm working on right now. I don't really have a clue to prevent it. Bug tested on Firefox, Chrome and Opera.

Tested also on Opera "no javascript mode". If javascript is disabled issue doesn't occure.

Thanks in advance for any clue or solution.

Answer 1

Instead of using replace, use the following:

window.location.href = ''

Answer 2

Adding to MarcoK's answer.

When using replace you are replacing the history state so you are not pushing one more state to the history.

If you have the following:

Page1 to State1

Page2 to State2

and then you use replace you will be replacing Page3 to State2.

When you press the back button you will go from State2 to State1 and that is why you are going to Page1.

When using window.location.href you are adding one more state so Page3 will be set to State3 and when you click the back button you will go to State2 wich has Page2 as URL.