Login/Register
Differentiate between back button pressed and forward button pressed with History API
Asked Answered
javascripthtmlbrowser-historyhtml5-history
G

1

15

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:

  1. index1.html
  2. button press → index2.html
  3. button press → index3.html
  4. back button pressed → index2.html
  5. forward button pressed → URL is now 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);
        });
    });
}
Govern answered 19/5, 2014 at 7:28 Comment(7)
You shouldn't need to differentiate between forward/back. You should use the state variable to store the state that the user navigates to. It looks like you're currently storing it in a global variable, URL? P.S. You should use on/off in place of bind/unbind in modern versions of jQuery – Polash
Hi, ok, I changed my bind/unbind to on/off. Ok, so the best way would be to get the URL when popstate fires and then load the content? – Govern
The URL is kind of irrelevant when using the History API. It's just for user feedback to let them know where they are. As the developer, you should be concentrating on the state variable you passed into pushState: history.pushState(**{ status: "OpenFile" }**, "Open", "irrelevanturl.html"); – Polash
this May help you to find your answer: #25807108 – Widthwise
How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate? discussion might be relevant. – Plagal
You can also add a deep linking machanism that will parse the url and know what it should load. After you have it, you can just change the url using the history API and let the "router" do the rest.... – Frisby
Possible duplicate of How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate? – Penza
R
1

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>
Rog answered 22/8, 2018 at 16:9 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.