Changing URL structure dynamically -- back/forward

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?


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.

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:


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.

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

Need Your Help

What is the difference between "#!/usr/bin/env bash" and "#!/usr/bin/bash"?

linux bash shell unix shebang

In the header of a bash script, what's the difference between those two statements ?

Concatenating 3 columns but not all have data in them


I am trying to concatenate 3 columns of data where 1 of the columns may contain no value. They are all number strings, and I want to concatenate each string with a dot in between. However, if the t...