How can I remove the query string from the url after the page loads?

Question

I have a URL with a long query string attached to it. After the page loads, I do not require the query string. So I want to remove the query string from the address bar with

Answer 1

That is achievable in modern browsers using the history api, but probably isn't the best solution to your problem.

history.replaceState({}, 'some title', '/');

It sounds like you would be better off processing the data and then redirecting to the homepage instead of returning an HTML document directly.

Since you aren't wanting to keep the URL around, it won't be useful for bookmarking, so it is quite likely you would be better off making a POST request.

This suggests that you should be using the POST-Redirect-GET pattern.

Answer 2

I use this code snippit in my personal projects where i need to remove URL params without re-loading:

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

Answer 3

Updated Code Now it will work

Just Add Below code in you page whose link you want to change.

// javascript function

   function buildLin(first) {
    var firs = first.toString()
       //alert(firs);
       //document.getElementById("team").value = "1";
           document.location.hash = "#" + firs.replace(/ /g, "_");
        //alert(document.location.hash);
    }

 //jQuery to call above function after page loads

  $(document).ready(function () {
      buildLin(2);
  });

Don't forget to add http://code.jquery.com/jquery-latest.js on your page ​

Answer 4

I want to add one more way to do this, especially for the ones who are using $routeProvider.

As it has been mentioned in some other answers, you do this by using:

var yourCurrentUrl = window.location.href.split('?')[0]; 
window.history.replaceState({}, '', yourCurrentUrl ); 

or by creating a new record in history stack:

window.history.pushState({}, '', yourCurrentUrl );  

For a very detailed and nice explanation about doing with history.pushState and history.replaceState , you can read this post on SO .

HOWEVER if you are using Angular $routeProvider in your app, then it will still capture this change if that matches with any existing pattern. To avoid that, make sure your $routeProvider has reloadOnSearch flag set to false because by default it is true .

For example:

$routeProvider.when("/path/to/my/route",{
   controller: 'MyController',
   templateUrl: '/path/to/template.html',
   //Secret Sauce
   reloadOnSearch: false//Make sure this is explicitly set to false
});