0

I trying to modify URL parameters, but I can't find a perfect way.

First I tried with:

window.location.href = window.location.href + '?test';

The problem is, that the page reloads and it is just added to the url.

Then I tried with:

window.location.href = String( window.location.href ).replace( "?test", "" );

This works perfect, the part I want to replace, gets replaced/deleted, but the page reloads every time...

Then I read about:

window.history.pushState( {} , 'test', '?test' );

But this doesn't work somehow...

My aim is to add and replace/delete URL strings, when buttons were clicked to control functions.

E.g. The URL is http://www.example.com/?showoverlay&?showhint

So for example this shows an overlay and a hint tooltip based on these URL parameters. When the user closed the overlay, the part "showoverlay" should be removed without a page reload. So the URL is:

http://www.example.com/?showhint

Max Di Campo
  • 408
  • 1
  • 4
  • 12
  • 1
    Possible duplicate of [Modify the URL without reloading the page](https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) – WillardSolutions Jul 31 '18 at 21:07

1 Answers1

0

Have you tried using replaceState? It replaces the history without reloading the page and might fit your use case.

window.history.replaceState(data, title [, url  ] );

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method

If you need to keep other parts of the url, make sure to store it in a separate variable and attach it back in the url.

This is roughly how you can get each part of your URL:

let url = window.location.origin + window.location.pathname + window.location.search

And then you just add it back with 

window.history.replaceState({}, '', url + '&yourNewParameters=value')
anacampesan
  • 105
  • 10
  • yes, I tried, but to store other parts of the url is to complicated for my low dev skills. There isn't an easier way or? – Max Di Campo Aug 01 '18 at 06:40
  • Please check my updated answer, I included an example – anacampesan Aug 01 '18 at 16:00
  • Thanks for your help. The problem is, I don't know the other strings of url. So I can't replace it with a fixed string. I need to cut off the "showoverlay", but "showhint" should still stay in the url. But it could also be, that "showhint" was removed before. So I am looking for a search and if its there, replace this part, but leave the rest. :S – Max Di Campo Aug 01 '18 at 21:40
  • then you would have to store your search string separately with let searchStr = window.location.search and then use searchStr.indexOf('showoverlay') for example to check if showoverlay is there, then you can simply go with searchStr.replace('showoverlay', 'something else') – anacampesan Aug 02 '18 at 14:14
  • I know it's cheeky, but could you provide me a simple jsfiddle, where on click a parameter gets added and on close its getting deleted, so I can try to understand - because I don't get it this way. But it sounds exactly what I am looking for. – Max Di Campo Aug 06 '18 at 10:55