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:
[pastacode lang=”javascript” manual=”window.onpopstate%20%3D%20function(e)%0A%7B%0A%20%20%20%20if(e.state)%0A%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22content%22).innerHTML%20%3D%20e.state.html%3B%0A%20%20%20%20%20%20%20%20document.title%20%3D%20e.state.pageTitle%3B%0A%20%20%20%20%7D%0A%7D%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]
  • 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:
[pastacode lang=”javascript” manual=”history.pushState(null%2C%20null%2C%20’%2Fen%2Fstep2′)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]

  • 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.
[pastacode lang=”javascript” manual=”%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20ChangeUrl(title%2C%20url)%20%0A%7B%0A%20%20%20%20if%20(typeof%20(history.pushState)%20!%3D%20%22undefined%22)%0A%20%7B%0A%20%20%20%20%20%20%20%20var%20obj%20%3D%20%7B%20Title%3A%20title%2C%20Url%3A%20url%20%7D%3B%0A%20%20%20%20%20%20%20%20history.pushState(obj%2C%20obj.Title%2C%20obj.Url)%3B%0A%7D%0A%20else%0A%20%7B%0A%20%20%20%20%20%20%20%20alert(%22Browser%20does%20not%20support%20HTML5.%22)%3B%0A%20%20%20%20%7D%0A%7D%0A%3C%2Fscript%3E%0A%3Cinput%20type%3D%22button%22%20value%3D%22Page1%22%20onclick%3D%22ChangeUrl(‘Page1’%2C%20’Page1.htm’)%3B%22%20%2F%3E%0A%3Cinput%20type%3D%22button%22%20value%3D%22Page2%22%20onclick%3D%22ChangeUrl(‘Page2’%2C%20’Page2.htm’)%3B%22%20%2F%3E%0A%3Cinput%20type%3D%22button%22%20value%3D%22Page3%22%20onclick%3D%22ChangeUrl(‘Page3’%2C%20’Page3.htm’)%3B%22%20%2F%3E%0A” message=”javascript code” highlight=”” provider=”manual”/]

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
[pastacode lang=”javascript” manual=”document.location.hash%20%3D%20’lookAtMeNow’%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]
  • Changing full URL (the domain must be the same as original!) Chrome, Firefox, IE10+
[pastacode lang=”javascript” manual=”history.pushState(‘data%20to%20be%20passed’%2C%20’Title%20of%20the%20page’%2C%20’http%3A%2F%2Fwikitechy.com%2Ftest’)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]
  • 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=”history.replaceState(‘data%20to%20be%20passed’%2C%20’Title%20of%20the%20page’%2C%20’http%3A%2F%2Fwikitechy.com%2Ftest’)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]

[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”/]

Categorized in: