TL; DR
1- Para modificar la URL actual y añadir / inyección que (el nuevo URL modificada) como una nueva entrada a la lista de URL de la historia, el uso pushState:
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- Para reemplazar la URL actual sin agregarla a las entradas del historial, use replaceState:
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3- Dependiendo de su lógica de negocio , pushStateserá útil en casos como:
desea apoyar el botón de retroceso del navegador
desea crear una nueva URL, agregar / insertar / insertar la nueva URL en las entradas del historial y convertirla en la URL actual
permitiendo a los usuarios marcar la página con los mismos parámetros (para mostrar el mismo contenido)
para acceder mediante programación a los datos a través del stateObjanálisis luego desde el ancla
Como entendí por su comentario, desea limpiar su URL sin redirigir nuevamente.
Tenga en cuenta que no puede cambiar la URL completa. Simplemente puede cambiar lo que viene después del nombre del dominio. Esto significa que no puedes cambiar www.example.com/pero puedes cambiar lo que viene después.com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
Antecedentes
Nosotros podemos usar:
1- El método pushState () si desea agregar una nueva URL modificada a las entradas del historial.
2- El método replaceState () si desea actualizar / reemplazar la entrada del historial actual .
.replaceState()funciona exactamente igual, .pushState()excepto que .replaceState() modifica la entrada del historial actual en lugar de crear una nueva. Tenga en cuenta que esto no impide la creación de una nueva entrada en el historial global del navegador.
.replaceState()es particularmente útil cuando desea actualizar el objeto de estado o URL de la entrada del historial actual en respuesta a alguna acción del usuario.
Código
Para hacerlo, usaré el método pushState () para este ejemplo, que funciona de manera similar al siguiente formato:
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
Siéntase libre para sustituir pushStatecon replaceStatebase en sus necesidades.
Puede sustituir el parámetro "object or string"con {}y "Title"con document.titlepara que la declaración final se convierta en:
window.history.pushState({}, document.title, "/" + myNewURL );
Resultados
Las dos líneas de código anteriores crearán una URL como:
https://domain.tld/some/randome/url/which/will/be/deleted/
Convertirse:
https://domain.tld/my-new-url.php
Acción
Ahora intentemos un enfoque diferente. Digamos que necesita mantener el nombre del archivo. El nombre del archivo viene después del último /y antes de la cadena de consulta ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
Estarán:
http://www.someDomain.com/keepThisLastOne.php
Algo como esto lo hará funcionar:
//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;
}
ACTUALIZAR:
Para los fanáticos de una línea, intente esto en su consola / firebug y la URL de esta página cambiará:
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
La URL de esta página cambiará de:
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
A
http://stackoverflow.com/22753103#22753103
Nota: como Samuel Liew indicó en los comentarios a continuación, esta característica se ha introducido solo para HTML5.
Un enfoque alternativo sería redirigir realmente su página (pero perderá la cadena de consulta `? ', ¿Sigue siendo necesaria o los datos se han procesado?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";