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);
        });
    });
}
Rory O'Kane
  • 25,436
  • 11
  • 86
  • 123
Musterknabe
  • 4,781
  • 9
  • 52
  • 101
  • 6
    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 – CodingIntrigue May 19 '14 at 07:34
  • 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? – Musterknabe May 19 '14 at 07:41
  • 7
    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");` – CodingIntrigue May 19 '14 at 07:44
  • this May help you to find your answer: http://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser – aditya shrivastava Sep 19 '16 at 14:55
  • 4
    [How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate?](https://stackoverflow.com/questions/8980255/how-do-i-retrieve-if-the-popstate-event-comes-from-back-or-forward-actions-with) discussion might be relevant. – Leonid Vasilev Mar 07 '18 at 14:00
  • 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.... – Lior.Shacham May 15 '18 at 07:41
  • 1
    Possible duplicate of [How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate?](https://stackoverflow.com/questions/8980255/how-do-i-retrieve-if-the-popstate-event-comes-from-back-or-forward-actions-with) – Just a student May 23 '18 at 08:22

1 Answers1

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>
Ben Z.
  • 136
  • 1
  • 8