TL; DR
1- Verwenden Sie Folgendes, um die aktuelle URL zu ändern und sie (die neue geänderte URL) als neuen URL-Eintrag zur Verlaufsliste hinzuzufügen / einzufügen :pushState
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- Um die aktuelle URL zu ersetzen, ohne sie zu Verlaufseinträgen hinzuzufügen , verwenden Sie replaceState:
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3- Abhängig von Ihrer Geschäftslogik ist pushStatedies in folgenden Fällen hilfreich:
Sie möchten die Zurück-Schaltfläche des Browsers unterstützen
Sie möchten eine neue URL erstellen , die neue URL zu Verlaufseinträgen hinzufügen / einfügen / verschieben und sie zur aktuellen URL machen
Benutzer können die Seite mit denselben Parametern als Lesezeichen speichern (um denselben Inhalt anzuzeigen)
programmgesteuert auf die Daten zugreifen , indem sie stateObjvom Anker aus analysiert werden
Wie ich aus Ihrem Kommentar verstanden habe, möchten Sie Ihre URL bereinigen, ohne sie erneut umzuleiten.
Beachten Sie, dass Sie nicht die gesamte URL ändern können. Sie können einfach ändern, was nach dem Domainnamen kommt. Dies bedeutet, dass Sie nicht ändern können, www.example.com/aber Sie können ändern, was danach kommt.com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
Hintergrund
Wir können benutzen:
1- Die pushState () -Methode, wenn Sie Verlaufseinträgen eine neue geänderte URL hinzufügen möchten .
2- Die replaceState () -Methode, wenn Sie den aktuellen Verlaufseintrag aktualisieren / ersetzen möchten .
.replaceState()funktioniert genau so, .pushState()außer dass .replaceState() der aktuelle Verlaufseintrag geändert wird, anstatt einen neuen zu erstellen. Beachten Sie, dass dies die Erstellung eines neuen Eintrags im globalen Browserverlauf nicht verhindert.
.replaceState()Dies ist besonders nützlich, wenn Sie das Statusobjekt oder die URL des aktuellen Verlaufseintrags als Reaktion auf eine Benutzeraktion aktualisieren möchten .
Code
Dazu verwende ich für dieses Beispiel die pushState () -Methode, die ähnlich wie das folgende Format funktioniert:
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
Fühlen Sie sich frei zu ersetzen pushStatemit replaceStatebasierend auf Ihren Anforderungen.
Sie können den Parameter "object or string"durch {}und "Title"mit document.titleersetzen, sodass die endgültige Aussage wie folgt lautet:
window.history.pushState({}, document.title, "/" + myNewURL );
Ergebnisse
Die beiden vorherigen Codezeilen erstellen eine URL wie:
https://domain.tld/some/randome/url/which/will/be/deleted/
Werden:
https://domain.tld/my-new-url.php
Aktion
Versuchen wir nun einen anderen Ansatz. Angenommen, Sie müssen den Dateinamen beibehalten. Der Dateiname steht nach dem letzten /und vor der Abfragezeichenfolge ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
Wird sein:
http://www.someDomain.com/keepThisLastOne.php
So etwas wird es zum Laufen bringen:
//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;
}
AKTUALISIEREN:
Probieren Sie dies für Einzeiler-Fans in Ihrer Konsole / Ihrem Firebug aus. Die URL dieser Seite ändert sich:
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
Diese Seiten-URL ändert sich von:
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
Zu
http://stackoverflow.com/22753103#22753103
Hinweis: Wie Samuel Liew in den Kommentaren unten angegeben hat, wurde diese Funktion nur für eingeführt HTML5.
Ein alternativer Ansatz wäre, Ihre Seite tatsächlich umzuleiten (aber Sie verlieren die Abfragezeichenfolge "?", Wird sie noch benötigt oder wurden die Daten verarbeitet?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";