TL; DR
1- Per modificare URL corrente e aggiungere / Inject esso (il nuovo URL modificato) come nuova voce URL alla lista della storia, l'uso pushState:
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- Per sostituire l'URL corrente senza aggiungerlo alle voci della cronologia, utilizzare replaceState:
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3- A seconda della logica aziendale , pushStatesarà utile in casi come:
si desidera supportare il pulsante Indietro del browser
vuoi creare un nuovo URL, aggiungere / inserire / spingere il nuovo URL nelle voci della cronologia e renderlo URL corrente
consentendo agli utenti di aggiungere la pagina ai segnalibri con gli stessi parametri (per mostrare gli stessi contenuti)
a livello di codice accedere ai dati tramite l' stateObjpoi analizzare dal ancoraggio
Come ho capito dal tuo commento, vuoi pulire il tuo URL senza reindirizzare di nuovo.
Tieni presente che non puoi modificare l'intero URL. Puoi semplicemente cambiare ciò che viene dopo il nome del dominio. Ciò significa che non puoi cambiare www.example.com/ma puoi cambiare ciò che viene dopo.com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
sfondo
Possiamo usare:
1- Il metodo pushState () se si desidera aggiungere un nuovo URL modificato alle voci della cronologia.
2- Il metodo replaceState () se si desidera aggiornare / sostituire la voce della cronologia corrente .
.replaceState()funziona esattamente come .pushState()tranne che .replaceState() modifica la voce della cronologia corrente invece di crearne una nuova. Si noti che ciò non impedisce la creazione di una nuova voce nella cronologia del browser globale.
.replaceState()è particolarmente utile quando si desidera aggiornare l'oggetto stato o l' URL della voce della cronologia corrente in risposta ad alcune azioni dell'utente.
Codice
Per fare ciò userò il metodo pushState () per questo esempio che funziona in modo simile al seguente formato:
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
Sentitevi liberi di sostituire pushStatecon replaceStatebase alle vostre esigenze.
È possibile sostituire il parametro "object or string"con {}e "Title"con document.titlecosì la dichiarazione finale diventerà:
window.history.pushState({}, document.title, "/" + myNewURL );
risultati
Le due precedenti righe di codice creeranno un URL come:
https://domain.tld/some/randome/url/which/will/be/deleted/
Diventare:
https://domain.tld/my-new-url.php
Azione
Ora proviamo un approccio diverso. Di 'che devi conservare il nome del file. Il nome del file viene dopo l'ultimo /e prima della stringa di query ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
Sarà:
http://www.someDomain.com/keepThisLastOne.php
Qualcosa del genere lo farà funzionare:
//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;
}
AGGIORNARE:
Per i fan di un liner, provalo nella tua console / firebug e questo URL della pagina cambierà:
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
L'URL di questa pagina cambierà da:
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
Per
http://stackoverflow.com/22753103#22753103
Nota: come indicato da Samuel Liew nei commenti seguenti, questa funzione è stata introdotta solo per HTML5.
Un approccio alternativo sarebbe effettivamente reindirizzare la tua pagina (ma perderai la stringa di query `? ', È ancora necessaria o i dati sono stati elaborati?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";