0

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)

Improve this question

1 Answer 1

Reset to default
1

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)
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

-About memory growth: I'll make some tests to see how browsers behave with this. Maybe storing the data compressed would help (though it would shift problem to CPU usage). -About non-AJAX functionality: off course. -About Modernizr: any reason why you're recommending this versus other libraries such as jQuery for instance?
Modernizr is more to make sure your site would work without the AJAX loading, it's not a replacement for jQuery. You could test for support for the history API, and do something different in browsers that do not support it. Back to memory: I'm assuming you're caching the HTML source, which could be somewhere between 1KB and maybe 50KB (or more) for a complex page. That's a pretty simple calculation to determine how quickly it will grow. A couple MB would be fine for a desktop browser, but might be pushing it for mobile users.
agreed with the mobile users: I'm planning on having a much more light weight version of the website for them which should tackle that problem.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.