HTML JAVASCRIPT

How to Modify the URL without reloading the page

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');

  • 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.

READ  [Solved - 11 Answers] Create an unordered list without any bullets

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>

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');

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');

About the author

Venkatesan Prabu

Venkatesan Prabu

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment