Changing URL structure dynamically -- back/forward

Question

So I'm attempting to write a script that will load content dynamically so that the page doesn't ever have to be refreshed (the main content will be replaced, but the sidebar, header, footer, etc., will remain in the same place). I've gotten my event firing, and I'm using pushState() to update my URL. However, I can't figure out how I should use the window.history.back() and window.history.forward(). Would I have to redefine those two functions in order to get it to successfully travel?

score 0 · Answer 1 · edited Jul 21 '12 at 08:29

0

The easiest way I've found to do what (I think) you're after is to hook up your dynamically loading-ness to your window.location.hash, so:

window.location.hash='page_1';

You can then bind an event handler to the hash change and go AJAX down page 1.

Changing the hash causes a new history page, so you don't have to do anything with window.history at all.

edited Jul 21 '12 at 08:29

Anirudh Ramanathan

46,179
22
132
191

answered Jul 21 '12 at 08:09

Doug

3,312
1
24
31

Anirudh Ramanathan · Answer 2 · 2012-07-21T08:32:28.670

0

You are using PushState to update URL, so your history is already handled for you in all browsers that support that functionality. But older browsers do not support PushState, you might have to test

if (history.pushState) { //is supported }

I recommend that you use the History.js script here. It will revert to using the old onhashchange functionality, for HTML4 browsers and pushState for HTML5. You will not have to deal with history.forward manually.

On a side-note, Also, you do need to configure your .htaccess, so that bookmarks and page-links of your website work correctly.

Detailed Guide

edited Jul 21 '12 at 08:32

answered Jul 21 '12 at 08:12

Anirudh Ramanathan

46,179
22
132
191

Well, the way I'm doing it is that each page is a full page within itself, and I'm pulling specific content out of there to place into the current page. So there won't be an issue if someone wants to bookmark this. As far as the compatibility issue, this is just a little project, and I'm working strictly for HTML5-compatible browsers. I guess what I really want to do is to bind a specific action to the window.history.back() function. – Chad Jul 21 '12 at 08:50
Okay. Why would you want to bind an action to that function? `window.history.back`, if called from within javascript, will take the browser one step back. If the user presses the backbutton and you want to detect it, you could use [this](http://benalman.com/projects/jquery-bbq-plugin/). See similar question at http://stackoverflow.com/questions/172957/detecting-back-button-hash-change-in-url – Anirudh Ramanathan Jul 21 '12 at 08:56

score 0 · Answer 3 · answered Jul 21 '12 at 08:15

0

Though pushState() is history, you need to pass the URL so that the page will load without refreshing it.But windows.history.back() will take you the last page accessed from browser cache automatically.Here you not passing any URL.And the same is applicable to windows.history.forward() as well.

answered Jul 21 '12 at 08:15

UVM

9,776
6
41
66

So is there a way to either cache the history, or simulate it? – Chad Jul 21 '12 at 08:20
By default, browser cache page.So next time if the user tries to invoke the same page, browser will fetch it from the cache unless it is MODIFIED.In this case, if you call windows.history.back(), it will take last visited page from CACHE. – UVM Jul 21 '12 at 08:23
Right, but my question is how do I get around the problem if I am modifying these pages? Can I force a refresh on the back button? – Chad Jul 21 '12 at 08:27
You can.Please check this link.http://www.webdeveloper.com/forum/showthread.php?t=137518 – UVM Jul 21 '12 at 08:31

Changing URL structure dynamically -- back/forward

3 Answers3