Back button fails after window.location.replace (href);
I made a simple function that makes the entire container behave like a link (the "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'});
}
);
}
The function works fine. Instead of clicking the more button, the user can click throughout the container and be redirected correctly.
However, if the user clicks the back button after being redirected, the browser returns two steps instead of one as it should. Oddly enough, the story looks normal.
Simple outline for a better description:
Page1 → Page2
Page2 [user clicks on "allHot" container] → allHot redirects to page Page 3
Page3 [user clicks browser back button] → Page1
This is a major error for the website I'm currently working on. I really don't have a clue to prevent this. Fixed bug in Firefox, Chrome and Opera.
Tested also in Opera "no javascript mode". If javascript is disabled, the problem does not occur.
Thanks in advance for any hint or solution.
source to share
Adding to MarcoK's answer.
When used, replace
you replace the history state to avoid inserting another state into the history.
If you have the following:
Page1
before State1
Page2
to State2
and then you replace the replacement Page3
with State2
.
When you press the back button, you will navigate from State2
to State1
, which is why you are going Page1
.
When window.location.href
you use you add another state, so it Page3
will be set to State3
, and when you press the back button, you will be taken to State2
which has the Page2
URL.
source to share