How to Modify the URL without reloading the page?
- Updating address bar with new URL without hash or reloading the page
Example:
[pastacode lang=”javascript” manual=”%20function%20processAjaxData(response%2C%20urlPath)%0A%7B%0A%20%20%20%20%20document.getElementById(%22content%22).innerHTML%20%3D%20response.html%3B%0A%20%20%20%20%20document.title%20%3D%20response.pageTitle%3B%0A%20%20%20%20%20window.history.pushState(%7B%22html%22%3Aresponse.html%2C%22pageTitle%22%3Aresponse.pageTitle%7D%2C%22%22%2C%20urlPath)%3B%0A%20%7D%0A%0A” message=”javascript code” highlight=”” provider=”manual”/]- we can then use window.onpopstate to detect the back/forward button navigation:
- This works in Chrome, Safari, FF4+, and IE10pp4+!
We can do this to modify the url,
[pastacode lang=”javascript” manual=”window.history.pushState(%22object%20or%20string%22%2C%20%22Title%22%2C%20%22%2Fnew-url%22)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]- use history.pushState like this:
- The problem can be solved by implementing the History API, especially by using the pushState() method.
- We are recommend reading about it in MDN.
- There’s also an all-in-one solution called History.js, it will be implemented in x-browser easily (It will fallback to URL hashes # if the browser doesn’t support it).
Here’s an example:
[pastacode lang=”javascript” manual=”history.pushState(‘%20’%2C%20’New%20Page%20Title’%2C%20newHREF)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]Change Browser URL without reloading using JavaScript
- The HTML Markup consists of 3 buttons which make a call to a function ChangeUrl.
- This function accepts the page Title and URL as parameters.
- It first checks whether browser supports HTML5 and then a State object containing the page Title and URL is created and is passed to the HTML5 History pushState method along with the page Title and URL as the other two parameters.
The following example adds a query parameter to the URL without refreshing the page but only works on modern HTML5 browsers.
index.html
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Ctitle%3EAdd%20query%20parameter%20to%20the%20url%20without%20reload%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%3Cbutton%20onclick%3D%22updateURL()%3B%22%3EUpdate%3C%2Fbutton%3E%0A%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20function%20updateURL()%20%7B%0A%20%20%20%20%20%20if%20(history.pushState)%20%7B%0A%20%20%20%20%20%20%20%20%20%20var%20newurl%20%3D%20window.location.protocol%20%2B%20%22%2F%2F%22%20%2B%20window.location.host%20%2B%20window.location.pathname%20%2B%20’%3Fpara%3Dhello’%3B%0A%20%20%20%20%20%20%20%20%20%20window.history.pushState(%7Bpath%3Anewurl%7D%2C”%2Cnewurl)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]We can use the following:
[pastacode lang=”javascript” manual=”%24(‘a’).click(function()%0A%7B%0Avar%20value%20%3D%20%24(this).attr(‘id’)%3B%0Awindow.location.hash%20%3D%20value%3B%20%2F%2F%20it%20appends%20id%20to%20url%20without%20refresh%0A%7D)%3B%0A%0A%0A%24(window).bind(‘hashchange’%20function()%20%0A%7B%0A%20%20%20%20var%20newhash%20%3D%20window.location.hash.substring(1)%20%2F%2F%20it%20gets%20id%20of%20clicked%20element%0A%20%20%20%20%2F%2F%20use%20load%20function%20of%20jquery%20to%20do%20the%20necessary…%0A%7D)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]- Changing only what’s after hash – old browsers
- The above will add a new entry to the history so we can press Back button to go to the previous state. To change the URL in place without adding a new entry to history use.
[pastacode lang=”javascript” manual=”parent.location.hash%20%3D%20%E2%80%9Cwikitechy%22%3B%0A” message=”JAVASCRIPT CODE” highlight=”” provider=”manual”/]
Below is the function to change the URL without reloading the page. It only support for HTML5
[pastacode lang=”javascript” manual=”%20%20function%20ChangeUrl(page%2C%20url)%20%0A%7B%0A%20%20%20%20%20%20%20%20if%20(typeof%20(history.pushState)%20!%3D%20%22undefined%22)%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20obj%20%3D%20%7BPage%3A%20page%2C%20Url%3A%20url%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20history.pushState(obj%2C%20obj.Page%2C%20obj.Url)%3B%0A%20%7D%0A%20else%0A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20window.location.href%20%3D%20%22homePage%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20alert(%22Browser%20does%20not%20support%20HTML5.%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20ChangeUrl(‘Page1’%2C%20’homePage’)%3B%0A” message=”JAVASCRIPT CODE” highlight=”” provider=”manual”/]