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 without a page reload.

I tried parent.location.hash = ''; and window.location.href = '/#'

They did not make a difference.

hash is the one that comes after the `#`. query string is the one after the `?` but before the `#`. what you are doing makes no sense. why would you want to hide it? — Joseph, May 22 '12 at 11:18
read http://stackoverflow.com/questions/136458/change-the-url-in-the-browser-without-loading-the-new-page-using-javascript — shareef, May 22 '12 at 11:21

score 45 · Answer 1 · answered Jan 21 '15 at 22:04

As others have said, you can do this using the History API in modern browsers (IE10+, FF4+, Chrome5+). There was no full example in the answers, so figured I'd share my solution, as I just had a requirement to do the same thing:

history.pushState(null, "", location.href.split("?")[0]);

If you are using Modernizr, you can also check if the History API is available like so:

if (Modernizr.history) {
    history.pushState(null, "", location.href.split("?")[0]);
}

score 18 · Answer 2 · answered May 22 '12 at 11:19

18

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.

answered May 22 '12 at 11:19

Quentin

800,325
104
1,079
1,205

I cannot use a POST because it is the analytics data that is getting passed in the query string – Sangam254 May 22 '12 at 11:26
I don't see how that follows. Even if it does, you can still redirect. – Quentin May 22 '12 at 11:57

mattytommo · Accepted Answer · 2013-03-13T14:05:10.343

8

You can't do that without reloading the page, imagine if you could put whatever you wanted in the browser address bar? Security fun :)

Although you can now do it in HTML5 (which will only work on browsers supporting it) using the new history API, but realistically, your scenario best warrants a rewrite instead of including that (seems sledgehammer to crack a nut).

As you said you don't need the query string after the page loads, you should really post back, then redirected to another URL after you've finished your processing.

edited Mar 13 '13 at 14:05

answered May 22 '12 at 11:17

mattytommo

52,879
15
115
143

7

That isn't true. The [history API](http://stackoverflow.com/a/10700997/19068) makes it possible. It has some limits, the main one being that you can't change the URL to one that appears on a different origin, but the question doesn't require that it switch origins. – Quentin Mar 13 '13 at 13:03
2

@Quentin You're right, I can't delete it (it's accepted) so I've edited to incorporate that. I +1ed yours also :) – mattytommo Mar 13 '13 at 14:05

score 6 · Answer 4 · answered Mar 05 '19 at 09:01

6

Remove query string value from address bar

var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("?"));
    window.history.replaceState({}, document.title, clean_uri);
}

answered Mar 05 '19 at 09:01

Fezal halai

663
9
11

score 3 · Answer 5 · answered May 22 '12 at 11:19

3

Use history.replaceState({}, "Title", "page.html");

same syntax for pushState. However you will have to find a way to make IE understand that.

A better way would be to use Apache mod_rewrite module. It's quite easy to use.

answered May 22 '12 at 11:19

d4rkpr1nc3

1,770
12
16

But mod_rewrite will redirect to the trimmed url before page loads – Sangam254 May 22 '12 at 11:25

score 3 · Answer 6 · answered Jun 30 '20 at 04:49

3

window.history.replaceState(null, null, window.location.pathname);

answered Jun 30 '20 at 04:49

lalit kumar

61
8

This is the correct answer. – Quuxuu May 11 '21 at 00:42

score 2 · Answer 7 · answered Jul 10 '17 at 13:10

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

answered Jul 10 '17 at 13:10

ChristianG

368
3
11

Code Spy · Answer 8 · 2012-05-22T11:56:01.567

0

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

edited May 22 '12 at 11:56

answered May 22 '12 at 11:47

Code Spy

7,520
3
57
39

Thank you for the code. But it adds a #2 at the end of the url(after the query string). I wanted to remove the query string from the url after the page loads. – Sangam254 May 23 '12 at 05:15

score 0 · Answer 9 · answered Apr 24 '18 at 18:08

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

score -2 · Answer 10 · answered May 22 '12 at 11:20

-2

You could avoid a query string altogether by using POST instead of GET.

answered May 22 '12 at 11:20

Widor

12,075
6
35
60

I cannot use a POST because it is the analytics data that is getting passed in the query string – Sangam254 May 22 '12 at 11:27

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

10 Answers10

Linked