Eliminar parámetros de URL sin actualizar la página

TL;DR

1. Para modificar la URL actual y agregarla/inyectarla ( la nueva URL modificada) como una nueva entrada de URL en la lista del historial, use pushState:

   window.history.pushState({}, document.title, "/" + "mi-nueva-url.html");

2. Para reemplazar la URL actual sin agregarla a las entradas del historial, use replaceState:

   window.history.replaceState({}, document.title, "/" + "mi-nueva-url.html");

3. Dependiendo de su lógica de negocio , pushStateserá útil en casos como:

   • desea admitir el botón Atrás del navegador

   • desea crear una nueva URL, agregue /insertar/enviar la nueva URL a las entradas del historial y conviértala en la URL actual

   • permitir 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 desde el ancla

Según entendí por tu comentario, deseas limpiar tu URL sin volver a redirigir.

Tenga en cuenta que no puede cambiar la URL completa. Puedes simplemente 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

Fondo

Nosotros podemos usar:

1. El pushState()método si desea agregar una nueva URL modificada a las entradas del historial.

2. El replaceState()método 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 la URL de la entrada del historial actual en respuesta a alguna acción del usuario.

Código

Para hacer eso 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 );

No dude en reemplazarlo pushStatesegún replaceStatesus requisitos.

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 probemos un enfoque diferente. Digamos que necesita conservar 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

Será:

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 sola línea, prueben 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 introdujo solo para HTML5.

Un enfoque alternativo sería redirigir su página (pero perderá la cadena de consulta `?', ¿todavía es necesaria o los datos han sido procesados?).

window.location.href =  window.location.href.split("?")[0]; //"http://www.newurl.com";

Nota 2:

Firefox parece ignorar window.history.pushState({}, document.title, '');cuando el último argumento es una cadena vacía. Agregar una barra diagonal ( '/') funcionó como se esperaba y eliminó toda la parte de consulta de la cadena de URL. Chrome parece estar bien con una cadena vacía.

Mar 31 '2014 03:03 Mohammed Joraid