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

Estoy tratando de eliminar todo después del "?" en la URL del navegador en el documento listo.

Esto es lo que estoy intentando:

jQuery(document).ready(function($) {

var url = window.location.href;
    url = url.split('?')[0];
});

Puedo hacer esto y ver que funciona a continuación:

jQuery(document).ready(function($) {

var url = window.location.href;
    alert(url.split('?')[0]);
});

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";

Todo esto es engañoso, nunca querrás agregarlo al historial del navegador a menos que quieras ir a una página diferente en una aplicación de una sola página. Si desea eliminar los parámetros sin un cambio en la página, debe usar:

window.history.replaceState(null, null, window.location.pathname);

Una forma sencilla de hacerlo, funciona en cualquier página, requiere HTML 5

// get the string following the ?
var query = window.location.search.substring(1)

// is there anything there ?
if(query.length) {
   // are the new history methods available ?
   if(window.history != undefined && window.history.pushState != undefined) {
        // if pushstate exists, add a new state to the history, this changes the url without reloading the page

        window.history.pushState({}, document.title, window.location.pathname);
   }
}

Creo que el mejor y más simple método para esto es:

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

si tengo una etiqueta especial al final de mi URL como: http://dominio.com/?tag=12345 Aquí está el siguiente código para eliminar esa etiqueta siempre que se presente en la URL:

<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: document.title, Url: window.parent.location.pathname };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        window.parent.location = window.parent.location.pathname;
    }
}
</script>

Esto da la idea de eliminar uno o más (o todos) parámetros de la URL

Con window.location.pathname básicamente obtienes todo antes de '?' en la url.

var pathname = window.location.pathname; // Solo devuelve la ruta

var url = window.location.href; // Devuelve la URL completa

Quería eliminar solo un parámetro success. Así es como puedes hacer esto:

let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)

Esto también se conserva #hash.

URLSearchParamsno funcionará en IE, pero se está trabajando para Edge . Puede usar un polyfill o podría usar una función de ayuda ingenua para el soporte de IE:

function take_param(key) {
    var params = new Map(location.search.slice(1).split('&')
        .map(function(p) { return p.split(/=(.*)/) }))   
    var value = params.get(key)
    params.delete(key)
    var search = Array.from(params.entries()).map(
        function(v){ return v[0]+'='+v[1] }).join('&')
    return {search: search ? '?' + search : '', value: value}
}

Esto se puede usar como:

history.replaceState(
    null, '', take_param('success').search + location.hash)

Mejor solucion:

window.history.pushState(null, null, window.location.pathname);

Ninguna de estas soluciones realmente funcionó para mí, aquí hay una función compatible con IE11 que también puede eliminar múltiples parámetros:

/**
* Removes URL parameters
* @param removeParams - param array
*/
function removeURLParameters(removeParams) {
  const deleteRegex = new RegExp(removeParams.join('=|') + '=')

  const params = location.search.slice(1).split('&')
  let search = []
  for (let i = 0; i < params.length; i++) if (deleteRegex.test(params[i]) === false) search.push(params[i])

  window.history.replaceState({}, document.title, location.pathname + (search.length ? '?' + search.join('&') : '') + location.hash)
}

removeURLParameters(['param1', 'param2'])

//Joraid code is working but i altered as below. it will work if your URL contain "?" mark or not
//replace URL in browser
if(window.location.href.indexOf("?") > -1) {
    var newUrl = refineUrl();
    window.history.pushState("object or string", "Title", "/"+newUrl );
}

function refineUrl()
{
    //get full url
    var url = window.location.href;
    //get url after/  
    var value = url = url.slice( 0, url.indexOf('?') );
    //get the part after before ?
    value  = value.replace('@System.Web.Configuration.WebConfigurationManager.AppSettings["BaseURL"]','');  
    return value;     
}

Para borrar todos los parámetros, sin actualizar la página, Y si está usando HTML5, puede hacer esto:

history.pushState({}, '', 'index.html' ); //replace 'index.html' with whatever your page name is

Esto agregará una entrada en el historial del navegador. También podría considerar replaceStatesi no desea agregar una nueva entrada y solo desea reemplazar la entrada anterior.

En jquery use <

window.location.href =  window.location.href.split("?")[0]

Aquí hay un ES6 one liner que preserva el hash de ubicación y no contamina el historial del navegador al usar replaceState:

(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)