How to Modify the URL without reloading the page?

  • Updating address bar with new URL without hash or reloading the page

Example:

javascript code 
 function processAjaxData(response, urlPath)
{
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }
  • we can then use window.onpopstate to detect the back/forward button navigation:
javascript code 
window.onpopstate = function(e)
{
    if(e.state)
{
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};
  • This works in Chrome, Safari, FF4+, and IE10pp4+!

We can do this to modify the url,

javascript code 
window.history.pushState("object or string", "Title", "/new-url");
  • use history.pushState like this:
javascript code 
history.pushState(null, null, '/en/step2');
[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:

javascript code 
history.pushState(' ', 'New Page Title', newHREF);

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.
javascript code 
<script type="text/javascript">
function ChangeUrl(title, url) 
{
    if (typeof (history.pushState) != "undefined")
 {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
}
 else
 {
        alert("Browser does not support HTML5.");
    }
}
</script>
<input type="button" value="Page1" onclick="ChangeUrl('Page1', 'Page1.htm');" />
<input type="button" value="Page2" onclick="ChangeUrl('Page2', 'Page2.htm');" />
<input type="button" value="Page3" onclick="ChangeUrl('Page3', 'Page3.htm');" />

The following example adds a query parameter to the URL without refreshing the page but only works on modern HTML5 browsers.

index.html

html code 
<!DOCTYPE html>
<html>
<head>
  <title>Add query parameter to the url without reload</title>
</head>
<body>
  <button onclick="updateURL();">Update</button>
  <script type="text/javascript">
    function updateURL() {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?para=hello';
          window.history.pushState({path:newurl},'',newurl);
      }
    }
  </script>
</body>
</html>
[ad type=”banner”]

We can use the following:

javascript code 
$('a').click(function()
{
var value = $(this).attr('id');
window.location.hash = value; // it appends id to url without refresh
});


$(window).bind('hashchange' function() 
{
    var newhash = window.location.hash.substring(1) // it gets id of clicked element
    // use load function of jquery to do the necessary...
});

  • Changing only what’s after hash – old browsers
javascript code 
document.location.hash = 'lookAtMeNow';
  • Changing full URL (the domain must be the same as original!) Chrome, Firefox, IE10+
javascript code 
history.pushState('data to be passed', 'Title of the page', 'http://wikitechy.com/test');
  • 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.
javascript code 
history.replaceState('data to be passed', 'Title of the page', 'http://wikitechy.com/test');
[ad type=”banner”]

JAVASCRIPT CODE 
parent.location.hash = “wikitechy";

Below is the function to change the URL without reloading the page. It only support for HTML5

JAVASCRIPT CODE 
  function ChangeUrl(page, url) 
{
        if (typeof (history.pushState) != "undefined") 
{
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
 }
 else
 {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

Categorized in:

HTMLJAVASCRIPT

Tagged in:

, , , , , , , , , , , , , , , , ,