chrome - title html javascript

Agregando parámetro a la URL sin actualizar

Question

Sé que esto se ha preguntado muchas veces antes, pero las respuestas no fueron lo suficientemente descriptivas para resolver mi problema. No quiero cambiar la URL completa de la página. Quiero adjuntar un parámetro &item=brand al hacer clic en el botón sin actualizar.

Utilizando document.location.search += ''&item=brand''; hace que la página se actualice.

Utilizando window.location.hash = "&item=brand"; agregue sin actualizar pero con un # hash que elimina el uso / efecto del parámetro. Intenté eliminar el hash después de agregar, pero no funcionó.

Esta respuesta y muchas otras sugieren el uso de HTML5 History API, específicamente el método history.pushState , y para los navegadores antiguos es configurar un identificador de fragmento para evitar que la página se vuelva a cargar. ¿Pero cómo?

Asumiendo que la URL es: http://example.com/search.php?lang=en

¿Cómo puedo agregar &item=brand usando el método pushState HTML5 o un identificador de fragmento para que la salida sea así: http://example.com/search.php?lang=en&item=brand sin una actualización de página?

Espero que alguien pueda aclarar cómo usar el pushState HTML5 para agregar un parámetro a una URL existente / actual. O alternativamente, cómo establecer un identificador de fragmento para el mismo propósito. Un buen tutorial, demo o pieza de código con una pequeña explicación sería genial.

Demo de lo que he hecho hasta ahora. Tus respuestas serían muy apreciadas.

Answer 1

Puede utilizar los métodos pushState o replaceState , es decir:

window.history.pushState("object or string", "Title", "new url");

O

window.history.replaceState(null, null, "/another-new-url");

Answer 2

Si alguien quiere agregar un parámetro a una URL más compleja (quiero decir, https://.com/questions/edit?newParameter=1 ), el siguiente código funcionó para mí

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + ''?newParameter=1'';
window.history.pushState({ path: newurl }, '''', newurl);

¡Espero que esto ayude!