Menu
I'm using the history API to push a new URL to the web page without reloading it. I have multiple buttons that all have different functionality.
My script now works almost without problems. When I press the button something happens, and when I go back the script fires event listener without reloading the page.
However, when I now press the forward button, I want to go forward. The URL is changed correctly to the next one, but the event listener still fires as if the back button was pressed
Example:
index1.htmlindex2.html
index3.html
index2.html
index3.html, but the content is index1.html
I guess this is because I have a listener, that listens for popstate which happens for back button and forward button pressed. How can I differ what kind of button was pressed?
This is the part that binds the listener:
if (window.history && window.history.pushState) {
$(window).unbind('popstate');
$(window).bind('popstate', function (e) {
clearOverlays();
var url = URL
$.ajax ( {
url : url
}).done ( function ( data ) {
console.log(data);
});
});
}
762
The forward button is used to go to the next page while the back button is used to go to the previous page.
For pages that are set as non-cached, the browser reloads the page from the server when you press Back, as though it was the first time you are visiting it. For cached pages, the browser displays it out of the cache, which is much faster.
When referring to e-mail, forward is a button or feature that lets you send a received e-mail to another e-mail address.
If you've visited previous or even earlier pages within the browsing sessions, then you can move forward and go to the last page until the button is grayed out. The forward button serves a great purpose for easy navigation on Chrome.
Here is a way to simplify your code:
You can use the built-in <a> tag with a nested <input> tag in order to navigate between pages. Window.open() will create a popup, and window.location.replace() will disable the history API, neither of which would help you, so a nested <input> tag (inside of the <a> tag) is the most logical solution.
As for distinguishing the buttons, you could use the HTML onclick attribute in each button to specify the JS function to execute, in your case window.history.back() and window.history.forward().
For instance, you could use the following.
<!DOCTYPE html>
<!-- Example of code for your first page -->
<html lang="en">
<head>
<!-- Metadata -->
</head>
<body>
<h1>Page 1.html</h1>
<!-- The <a> tag below is what transitions between pages. The <input> tag is just for the appearance of a button. -->
<a href="yourlink.html"><input type="button" value="page2"></a>
<!-- Input tags below are required, unless you want to use 'javascript:(function)' in an <a> tag -->
<input type="button" onclick="window.history.back()" value="Go back">
<input type="button" onclick="window.history.forward()" value="Go forward">
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
