Search code examples
jqueryhtmlurlbrowserbrowser-history

Use of HTML5 history for full AJAX navigation


I would like to use the HTML5 window.history feature to implement full AJAX navigation on my website. I have found a demo which shows an implementation of window.history whereby some content is passed to the history which can be called back and displayed in a textarea. I would like to follow and extend that approach by:

  • changing the entire page content using AJAX when clicking on links.
  • before loading new content, save the entire content of the page in history against the current URL.
  • load the new content, change the URL, and save new content to history.

That way, when a user presses the previous and next browser buttons, the page content will be updated accordingly without ever triggering an HTTP request, giving the user a very smooth AJAX-based experience.

Q: Can you foresee potential issues with using such an approach? (I'm notably thinking about browser memory as I save entire pages to the history)


Solution

  • I would personally caution against this, as you're reinventing the wheel. I've seen a lot of people try something like this, and few ever work well. That said, here are some things to consider:

    • Yes, memory will grow, but depending on the breadth of the site and complexity of the source, you'll probably be okay.
    • Your site should still be fully functional without Javascript, or the AJAX calls. You should always generate URLs that will end up loading the correct page, so the user can copy + paste the link correctly. (This is where a lot of homebrew solutions trip up.)
    • Use Modernizr to test for the History support, so you don't end up breaking things in older browsers (IE8)