jQuery how do you change the address bar URL without reloading?

As was said earlier, the new history.pushState() method introduced with HTML5 lets you change the displayed URL.

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

It’s definitely supported by the current version of Chrome as I first noticed it in 20 Things I Learned and it’s supported in the beta version of Firefox.

For those worrying about phishing, it’s limited to same-origin changes - so can only be done in the scope of the original domain.

Apart from that, you’re limited to the hash-based usage.

conceptcoding said

As was said earlier, the new history.pushState() method introduced with HTML5 lets you change the displayed URL.

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

It’s definitely supported by the current version of Chrome as I first noticed it in 20 Things I Learned and it’s supported in the beta version of Firefox.

For those worrying about phishing, it’s limited to same-origin changes - so can only be done in the scope of the original domain.

Apart from that, you’re limited to the hash-based usage.

We get that part already conceptcoding… We were wondering about achieving the same thing WITHOUT having the hash (#) in the URL. It’d be nice if this was allowed on the same domain, so that wouldn’t help phishers.

For example, i shouldn’t be allowed to change my domain from email.com to bankofamerica.com… but i SHOULD be allowed to change from email.com to email.com/inbox without having to refresh the page. It’d be a neat feature. Hash tags work just fine for now though, although using hash tags prevent me from going to email.com from email.com/#inbox. From email.com/#inbox i MUST go to email.com/# if i wish NOT to refresh the page. There’s no way to go back to email.com (without #) without refreshing the page.

Strighker_001 said

We get that part already conceptcoding… We were wondering about achieving the same thing WITHOUT having the hash (#) in the URL. It’d be nice if this was allowed on the same domain, so that wouldn’t help phishers.

For example, i shouldn’t be allowed to change my domain from email.com to bankofamerica.com… but i SHOULD be allowed to change from email.com to email.com/inbox without having to refresh the page. It’d be a neat feature. Hash tags work just fine for now though, although using hash tags prevent me from going to email.com from email.com/#inbox. From email.com/#inbox i MUST go to email.com/# if i wish NOT to refresh the page. There’s no way to go back to email.com (without #) without refreshing the page.

Check that article on the MDC I linked, you can push new URLs to the browser, provided they are on the same domain.

Also check pjax out, it’s what Github developed & are using to simplify pushState + AJAX. I think probably the best use of pushState I’ve seen so far is their file browser.

conceptcoding said

Check that article on the MDC I linked, you can push new URLs to the browser, provided they are on the same domain.

Also check pjax out, it’s what Github developed & are using to simplify pushState + AJAX. I think probably the best use of pushState I’ve seen so far is their file browser.

OMG, That’s awesome!!! I thought it was impossible to change the address without reloading the whole page while NOT using hastags… I guess we’ve been proven wrong!

I wonder if it’s compatible

(redundant discussion to help promote this on Google:)
So apparently you can load dynamic content without hashtags! This is awesome. pjax is exactly how an application should be! The end user shouldn’t have to deal with hashtags, or even know the difference between fully re-loaded pages and/or dynamically loaded content on one single page. You can load content inside the page and save the address in the history without using hashtags. I guess that was possible before but people were too lazy to figure out how to not refresh the page since hashtags already don’t refresh the page. Load content without refreshing the page while updating the address bar without using hashtags: jquery-pjax. AJAX without hashtags: pjax (jquery-pjax).