TL; DR
1- Pour modifier l' URL en cours et ajouter / inject il (la nouvelle URL modifiée) comme une nouvelle entrée d'URL à la liste de l' historique, l' utilisation pushState:
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- Pour remplacer l'URL actuelle sans l'ajouter aux entrées d'historique, utilisez replaceState:
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3- En fonction de votre logique métier , pushStatesera utile dans des cas tels que:
vous souhaitez prendre en charge le bouton de retour du navigateur
vous voulez créer une nouvelle URL, ajouter / insérer / pousser la nouvelle URL vers les entrées d' historique et en faire l'URL actuelle
permettre aux utilisateurs de mettre en signet la page avec les mêmes paramètres (pour afficher le même contenu)
par programmation accéder aux données par l' stateObjanalyser puis de l'ancre
Comme je l'ai compris de votre commentaire, vous souhaitez nettoyer votre URL sans rediriger.
Notez que vous ne pouvez pas modifier toute l'URL. Vous pouvez simplement changer ce qui vient après le nom du domaine. Cela signifie que vous ne pouvez pas changer www.example.com/mais que vous pouvez changer ce qui vient après.com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
Contexte
On peut utiliser:
1- La méthode pushState () si vous souhaitez ajouter une nouvelle URL modifiée aux entrées d'historique.
2- La méthode replaceState () si vous souhaitez mettre à jour / remplacer l' entrée actuelle de l' historique.
.replaceState()fonctionne exactement comme .pushState()sauf que cela .replaceState() modifie l' entrée d' historique actuelle au lieu d'en créer une nouvelle. Notez que cela n'empêche pas la création d'une nouvelle entrée dans l'historique global du navigateur.
.replaceState()est particulièrement utile lorsque vous souhaitez mettre à jour l'objet d'état ou l' URL de l'entrée d'historique actuelle en réponse à une action de l'utilisateur.
Code
Pour ce faire, j'utiliserai la méthode pushState () pour cet exemple qui fonctionne de manière similaire au format suivant:
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
N'hésitez pas à remplacer pushStatepar en replaceStatefonction de vos besoins.
Vous pouvez remplacer le paramètre "object or string"par {}et "Title"par document.titleainsi la déclaration finale deviendra:
window.history.pushState({}, document.title, "/" + myNewURL );
Résultats
Les deux lignes de code précédentes créeront une URL telle que:
https://domain.tld/some/randome/url/which/will/be/deleted/
Devenir:
https://domain.tld/my-new-url.php
action
Essayons maintenant une approche différente. Disons que vous devez conserver le nom du fichier. Le nom de fichier vient après la dernière /et avant la chaîne de requête ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
Sera:
http://www.someDomain.com/keepThisLastOne.php
Quelque chose comme ça le fera fonctionner:
//fetch new URL
//refineURL() gives you the freedom to alter the URL string based on your needs.
var myNewURL = refineURL();
//here you pass the new URL extension you want to appear after the domains '/'. Note that the previous identifiers or "query string" will be replaced.
window.history.pushState("object or string", "Title", "/" + myNewURL );
//Helper function to extract the URL between the last '/' and before '?'
//If URL is www.example.com/one/two/file.php?user=55 this function will return 'file.php'
//pseudo code: edit to match your URL settings
function refineURL()
{
//get full URL
var currURL= window.location.href; //get current address
//Get the URL between what's after '/' and befor '?'
//1- get URL after'/'
var afterDomain= currURL.substring(currURL.lastIndexOf('/') + 1);
//2- get the part before '?'
var beforeQueryString= afterDomain.split("?")[0];
return beforeQueryString;
}
METTRE À JOUR:
Pour les fans d'un seul liner, essayez ceci dans votre console / firebug et cette URL de page changera:
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
L'URL de cette page changera de:
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
À
http://stackoverflow.com/22753103#22753103
Remarque: comme Samuel Liew l'a indiqué dans les commentaires ci-dessous, cette fonctionnalité n'a été introduite que pour HTML5.
Une autre approche consisterait à rediriger réellement votre page (mais vous perdrez la chaîne de requête «?», Est-elle toujours nécessaire ou les données ont-elles été traitées?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";