Javascript – Add query parameter to current URL without reload

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

index.html

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

 

Reference: StackOverflow – How do we update URL or query strings using javascript/jQuery without reloading the page?

Advertisements

2 thoughts on “Javascript – Add query parameter to current URL without reload”

  1. Instead of ?para=hello how do I have javascript find search parameters that someone has typed in my website? so that when they hit the update button the url shows the search parameters they entered in?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s