HTML JAVASCRIPT

How to Modify the URL without reloading the page

By Wikitechy Editor

March 25, 2017 2 Min Read

85 0

PROBLEM:

How to Modify the URL without reloading the page?

Table Of Content

PROBLEM
SOLUTION 1
Example
SOLUTION 2
SOLUTION 3
Here’s an example
SOLUTION 4
SOLUTION 5
index.html
SOLUTION 6
SOLUTION 7
SOLUTION 8
SOLUTION 9

SOLUTION 1:

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+!

SOLUTION 2:

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

SOLUTION 3:

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

SOLUTION 4:

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

SOLUTION 5:

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

SOLUTION 6:

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...
});

SOLUTION 7:

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

SOLUTION 8:

JAVASCRIPT CODE

parent.location.hash = “wikitechy";

SOLUTION 9:

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

Tags:

How to Modify the URL without reloading the page

PROBLEM:

Table Of Content

SOLUTION 1:

Example:

SOLUTION 2:

SOLUTION 3:

Here’s an example:

SOLUTION 4:

SOLUTION 5:

index.html

SOLUTION 6:

SOLUTION 7:

SOLUTION 8:

SOLUTION 9:

Tags:

Wikitechy Editor

Other Articles

UNIX – LINUX – What does “LC_ALL=C” do

[ Solved – 11 Answers ] JQUERY – JAVASCRIPT – Abort Ajax requests using jQuery

No Comment! Be the first one.

Leave a Reply

Popular Posts

Download Huawei P9 Lite Android Nougat Update [B336]

How to Install TWRP Recovery and Root Mi5s & Mi5s Plus

How to Downgrade Honor 5c from Nougat to Marshmallow

Download ZTE Axon 7 Android 7.1 Nougat Update (MiFavor 4.2)(B13)

Categories

Related Posts

Why is JavaScript Getting Such a Bad Reputation?

How do I start learning HTML for Beginners?

Best Startups Examples on React Native

Type and hit Enter to search

Type and hit Enter to search

How to Modify the URL without reloading the page

PROBLEM:

Table Of Content

SOLUTION 1:

Example:

SOLUTION 2:

SOLUTION 3:

Here’s an example:

SOLUTION 4:

SOLUTION 5:

index.html

SOLUTION 6:

SOLUTION 7:

SOLUTION 8:

SOLUTION 9:

Tags:

Share Article

Other Articles

No Comment! Be the first one.

Leave a Reply

Popular Posts

Categories

Related Posts