Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How could I change window's location without reloading and # hack?

At first I thought that hash hack is a requirement, however judging from the recent updates from facebook, I am thinking otherwise.

The original hash hack (I am not sure if this is the correct term) is that by changing location.hash, one may save a state in the URL without refreshing the page. That is extensively used by Google's apps, and Facebook, and lately #NewTwitter. However today I noticed that Facebook no longer have this "#" if you use a "modern" browser - like chrome or firefox. I double checked that they are not reloading by using developer tools and firebug respectively.

With a minimal search in stackoverflow, the closest one to the solution is using Flash - however I disabled Flash and facebook.com still works like a charm. Judging from the coverage in chrome 8 dev and firefox 4 beta, I wonder that could be related to HTML5-era APIs, but the code in Facebook is not of my capacity to debug to find out what they did.

Since this is like the first question I ask here, I wonder if any of you may have already solved this problem.

Thanks guys.

P.S. Doesn't work on IE8, haven't tested on IE9 beta.

like image 409
itsnotvalid Avatar asked Oct 22 '10 13:10

itsnotvalid


People also ask

How do I change URL without reloading?

Method 2: Adding a new state with pushState() Method: The pushState() method is used to add a new history entry with the properties passed as parameters. This will change the current URL to the new state given without reloading the page.

How do you edit HTML without reloading?

You should use the javascript function document. getElementById (DIV THAT YOU WOULD LIKE TO PLACE IN). innerHTML = YOUR_TEXT;. If you need a response from the server without reloading the page (you will still have to load, but the client will not notice), try using AJAX.

What would you use to change a browser's location and history without triggering a server page request?

Using history. pushState() method, we can now programmatically add the browser history entries and change the location without triggering a server page request.

Can Javascript change URL?

There are two methods to modify the URL in JavaScript without reloading the page. These are: The pushState() method. The replaceState() method.


1 Answers

Facebook is using the history api in HTML5. From this blog post you can see how this works. Basically they are making calls like the one below to change the url without reloading the page.

window.history.pushState("object or string", "Title", "/new-url");

Here is the HTML5 working draft spec about it: http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#the-location-interface

Sadly, IE9 does not support this api. New versions of Chrome and FF have full support.

like image 59
Nathan Totten Avatar answered Sep 18 '22 11:09

Nathan Totten