Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does GitHub change the URL without reloading a page?

Go to any GitHub page and click on any of the directories/files and observe how the URL changes but only part of the page is updated. There's no whole page reloading.

How do I do something similar using jQuery?

Does this work on most browsers (I'm using Chrome)?

like image 552
Continuation Avatar asked Sep 29 '11 00:09

Continuation


People also ask

How do I change URL but not reload?

history. pushState({page: "another"}, "another page", "example. html"); This will change the URL, but not reload the page.

How do I use JavaScript to modify the URL without reloading the page?

the page using JavaScript? the page using JavaScript? 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.


2 Answers

They use the history API, or specifically, history.pushState().

You can use this, jQuery is not required, but there are plugins such as history.js.

This works on most browsers, namely Chrome, Safari and Firefox. IE10 and above supports this. In older IEs, you can fall back onto using the hash (window.location.hash).

GitHub also blogged about this.

like image 139
alex Avatar answered Sep 27 '22 21:09

alex


Github use PJAX (Ref). You may see about jquery-pjax here. Note that this feature is not covered support by all browser, there are some browser that cannot be use this benefits.

like image 34
scalopus Avatar answered Sep 27 '22 22:09

scalopus