by
81k 38
1
8
3,352
8
Top 1% !
Popular
Famous
Tagged
Easy-to-find
Specified
Debate
OpenSource
Popularity: 3069th place
Created
Modified Jun 17, 2014
Languagejavascript
LicenseMIT_X11
webHTML5

Change the address in the browser without reloading

In HTML5 it is possible to change part of the address in the address browser without reloading the page. This helps building single page site with elements of the UI addressable using a consistent URL.
See an example here: http://www.usatoday.com/ .
By clicking on any article box a popup within the same page shows the content, and the URL in the address bar changes.

browser compatibility for this feature is available here: 
http://caniuse.com/#search=pushstate
http://caniuse.com/#search=replacestate
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/374/Change-the-address-in-the-browser-withou?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
// This add a new state to the browser history and replace the path window.history.pushState( stateObj, 'content title', '/new-path'); // This replace the current state to the browser history and replace the path window.history.replaceState(stateObj, 'content title', '/new-path');
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus