Menu
I was browsing GitHub.com and I noticed when looking at the source for a repository, and you click on a file, the source code slides in and the URL changes, but it doesn't appear as if the page has refreshed. Does anyone know how this is done? I've seen this done with the # sign, especially when creating Flash sites, but I've never seen this done quite like the way GitHub is doing it, without the #.
Here's an example: https://github.com/jquery/jquery
Click on one of the text files like .gitattributes then click on jQuery in the breadcrumb to see what I mean.
213
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.
history. pushState(nextState, nextTitle, nextURL); // This will replace the current entry in the browser's history, without reloading window.
history. pushState({page: "another"}, "another page", "example. html"); This will change the URL, but not reload the page.
href = 'https://code.tutsplus.com' ; So in this way, you can use the location. href method to change the URL and redirect users to a different webpage.
Github uses window.history.replaceState()
Here you can see how they do it
59
XMLHttpRequest is used on the client-side in Chrome/Webkit browsers to fetch server-side resources without page refreshing, and content is dynamically loaded in, and animations can be hooked in during that content being appended.
I'm not sure exactly why only Chrome is targeted by the ajax, as usually the hash mark changes when ajax is applied in the same manner ( like twitter ).
For the url changing dynamically, I believe all that's done is On second thought, it could be some new HTML5 feature that only chrome supports.location.href is updated.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
