StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAjax / HTML5 history states (popState, pushState, etc) - back button behavior
text
Body
copied!<p>There have been several questions about the <code>pushState</code> functionality of HTML5, but I'm not able to find anything about two issues I'm having. My <code>popstate</code> handler is defined like so:</p> <pre><code>$(window).bind('popstate', function (e) { if (!e.originalEvent.state) return; LoadContent({ url: e.originalEvent.state.path }); } </code></pre> <p>The <code>LoadContent</code> call simply fills a content pane using ajax. </p> <p><strong>Problem 1:</strong> Lets imagine that we start off at <code>page1</code> of my site by browsing to it. <code>LoadContent</code> won't be called since there is no <code>state</code>. Let's imagine that my browsing history is like so:</p> <pre><code>page1 -> (ajax)page2 -> (ajax)page3 -> (back pressed)page2 -> (back pressed)page1 </code></pre> <p>When I press the browser's back button to go to <code>page2</code>, everything is fine. However, when I press back again, which should load the content for <code>page1</code>, <code>e.originalEvent.state</code> is <em>null</em>, meaning LoadContent won't be called and so the content will remain the same as on <code>page2</code>. How can I get <code>page1</code>'s content to load when pressing back?</p> <p><strong>Problem 2:</strong> Imagine we press back from <code>page3</code> to <code>page2</code>, which means we load the 2nd page's content through ajax. Now imagine, we <strong>browse</strong> (ie, put in the URL manually into the browser's address bar) to <code>page3</code> again, and <strong>then</strong> press back again to go to <code>page2</code>. Instead of showing the 2nd page, the browser will instead show just the <strong>ajax results</strong> of <code>page2</code>'s content that we retrieved earlier, so that the rest of the page is not loaded. How can this be fixed?</p> <p>Thanks for any help!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload