Develop Reference

How to clear additional info from the redirect link?

I'm making discord login oauth2 in javascript, and I've set that when it's done it redirects me on '/auth', but when I'm on that page url has some other information in url, it's like '/auth#token_type=Bearer&access_token=12ekasd&expires_in=123123&scope=identify'.. Is it possible to change that url so it says just '/auth'? I've tried with window.location.href = '/auth' but nothing is being changed.
window.onload = () => {
what to code here?
}

The history API allows you to update the URL shown without actually redirecting the page.
window.history.replaceState({}, '', window.location.pathname);
This code should redirect you to the current path but without any hash or query string.
If you need to use the hash or query string in your code, make sure to save them before running this, since it also removes them from window.location.

Best way to modify URL parameters with js

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

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

JS: Reload the page without a specific param

I want to reload the page in Javascript without a specific param ie.
Let's say I want to reload www.domain.com/abc?num=4&something=1
But I want to reload www.domain.com/abc?number=4 only
Unfortunately the following keeps all of the params which isn't fit for my use case:
document.location.reload(false)
and:
window.location.href = window.location.pathname;
gets rid of every parameter and just navigates to the path. Is there a way to delete a query param from window.location before navigating back to it?

location.href=location.href.replace(/&?somthing=([^&]$|[^&]*)/i, "");

Redirect page and call javascript function

I need to redirect to another page onClick of submit and call a function making an ajax call. This is what I have :
$('#submitButton').click(function() {
window.location.href = "otherPage";
displayData();
});
Also, Another way I tried is to set the form fields on otherPage by using
var elem = window.document.getElementById(field);
elem.value = "new-value";
so that I could call the eventhandler of a submit button present on otherPage, but it doesn't work. Please let me know where I am wrong.

I'm not sure if there is a neat way to achieve this, but you can add a hash in your url you redirect to, then just simply check if the hash exists, execute function and remove hash.
Here are some handy URLs:
Location.Hash - information about this function and how to use it.
Removing hash from url without a page refresh - This was a bit of an issue, as window.location.href = ''; removes everything after the hash.

A hash (as Arko Elsenaar said) or a querystring parameter added to the target URL would allow you to detect what to do once there.
The hash makes it a bit easier while the querystring is cleaner if you want to pass more information.
For instance on the first page: window.location.href = "other/page.html#displayData";
On the second page:
if (window.location.hash === '#displayData') {displayData();}
Another way could be to use the HTML5 Storage API, if and only if the 2 pages are on the same domain.
1st page would do, before the redirection:
localStorage.displayData = true
And the 2nd:
if (localStorage.displayData) {displayData();}
However in this case you'll need to clean up the localStorage.displayData value when used, otherwise it will stay there forever and your second page would always find it set to true.
delete localStorage.displayData
All in all, the hash method seems best here.

Use Javascript to reload the page and specify a jquery tab

I want to use javascript to reload a page. I can't just use
window.location.reload(); as I'm using jquery tabs and want to specify a tab to be selected after the reload. Is setting window.location.href the best way to do this?
i.e. window.location.href = window.location.href + '#tabs-4';

A cleaner way:
window.location.hash = 'tabs-4';
window.location.reload();

All you have to do is to pass a var in the url (post) than with your javascript retreive it and select the tab associated to the var

you can have variable in redirect link like
index.html?tab=4
and than check it's value in javascript.
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
you can use this code to get a value. like
selec=get('tab');
$tabs.tabs('select', selec);
to switch to a tab.
See this link to get more details about
How to get "GET" request parameters in JavaScript?

As Brandon Joyce commented, my original code was probably best:
window.location.href = window.location.href + '#tabs-4';