CODEWITHSUNDEEP
javascriptjqueryhtml
matt
matt

Reputation: 44293

Website with hashchange - querying if popstate event is available?

I've never worked with the HTML5 onpopstate/pushState Method. However I'm building (or have already built) a website where scrolling through the page changes the hash in the addressbar to the ID of the currently shown element in the viewport. So I have a kind of browserhistory and Deep Linking on my single-page-layout.

I'm still doing this with setting the top.location.hash and using the hashchange() function. Now I've come across this new HTML5 popstate/onPushstate Method and thought this would be intersting …

First of: What are the benefits of using this popstate/onPushState Methods? Is it better using this than the classical way of using top.location.hash? Is the performance better?

If so, is there a way to query or find out if the current browser is supporting this Methods? So I can use those methods for modern browsers and fallback on the old way in older browsers.

Is that possible? If yes, than how?

Upvotes: 1

Views: 1583

Answers (2)

Daniel Kurka
Daniel Kurka

Reputation: 7985

You can do more things with the html5 history api.

You can replace the current item in the history or create a new one. With the hashtag solution you can only add new ones.

When you create or replace a history entry you can also change the url and pass an javascript object that will be returned to you in popstate which can contain any data.

A very good example for a good use of this api is github (http://www.github.com). At start they sent the full page once, after that they change the page and url to match the new page that you would load on initial request. (this means that refresh works very nicely)

if you want to test for history support you can do this like this:

if (history && history.pushState)

Upvotes: 0

Quentin
Quentin

Reputation: 943537

What are the benefits of using this popstate/onPushState Methods?

You get real URLs that don't depend on JavaScript to function.

If so, is there a way to query or find out if the current browser is supporting this Methods?

if (history && history.pushState)

… or just use a compatibility library

Upvotes: 1

Related Questions