replacestate - ¿Cómo eliminar el hash de window.location(URL) con JavaScript sin actualizar la página?

window history pushstate refresh

Question

Tengo una URL como: http://example.com#something , ¿cómo #something , sin causar que la página se actualice?

Intenté la siguiente solución:

window.location.hash = '''';

Sin embargo, esto no elimina el símbolo # hash de la URL.

Answer 1

¿Qué tal lo siguiente?

window.location.hash='' ''

Tenga en cuenta que estoy configurando el hash en un solo espacio y no en una cadena vacía.

Establecer el hash en un anclaje no válido tampoco causa una actualización. Como,

window.location.hash=''invalidtag''

Pero, creo que la solución anterior es engañosa. Esto parece indicar que hay un ancla en la posición dada con el nombre dado aunque no haya uno. Al mismo tiempo, el uso de una cadena vacía hace que la página se mueva hacia la parte superior, lo que a veces puede ser inaceptable. El uso de un espacio también garantiza que siempre que la URL se copie, se marque y se vuelva a visitar, la página generalmente estará en la parte superior y el espacio se ignorará.

Y, hey, esta es mi primera respuesta en . Espero que alguien lo encuentre útil y que coincida con los estándares de la comunidad.

Answer 2

(Demasiadas respuestas son redundantes y desactualizadas). La mejor solución ahora es esta:

history.replaceState(null, null, '' '');

Answer 3

Aquí hay otra solución para cambiar la ubicación usando href y eliminar el hash sin desplazarse.

La solución mágica se explica here . Especificaciones here .

const hash = window.location.hash;
history.scrollRestoration = ''manual'';
window.location.href = hash;    
history.pushState('''', document.title, window.location.pathname);

NOTA: la API propuesta ahora es parte de WhatWG HTML Living Standard

Answer 4

Esto eliminará también el hash final. por ejemplo: http://test.com/123#abc -> http://test.com/123

if(window.history.pushState) {
    window.history.pushState('''', ''/'', window.location.pathname)
} else {
    window.location.hash = '''';
}

Answer 5

Intenta lo siguiente:

window.history.back(1);

Answer 6

Para eliminar el hash, puedes intentar usar esta función

function remove_hash_from_url()
{
    var uri = window.location.toString();
    if (uri.indexOf("#") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("#"));
        window.history.replaceState({}, document.title, clean_uri);
    }
}

Answer 7

Puedes hacerlo de la siguiente manera:

history.replaceState({}, document.title, window.location.href.split(''#'')[0]);

Answer 8

Puedes reemplazar el hash con null

var urlWithoutHash = document.location.href.replace(location.hash , "" );

Answer 9

Resolver este problema está mucho más al alcance hoy en día. La API de historial de HTML5 nos permite manipular la barra de ubicación para mostrar cualquier URL dentro del dominio actual.

function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                                       + window.location.search);
}

Demostración de trabajo: http://jsfiddle.net/AndyE/ycmPt/show/

Esto funciona en Chrome 9, Firefox 4, Safari 5, Opera 11.50 y en IE 10. Para los navegadores no compatibles, siempre se puede escribir un script degradante que haga uso de él cuando esté disponible:

function removeHash () { 
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page''s current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Así que puedes deshacerte del símbolo de hash, pero no en todos los navegadores, todavía.

_{Nota: si desea reemplazar la página actual en el historial del navegador, use replaceState() lugar de pushState() .}

Answer 10

Sencillo y elegante:

history.replaceState({}, document.title, ".");  // replace / with . to keep url

Answer 11

Pregunta inicial:

window.location.href.substr(0, window.location.href.indexOf(''#''))

o

window.location.href.split(''#'')[0]

Ambos devolverán la URL sin el hash ni nada después.

Con respecto a su edición:

Cualquier cambio en window.location activará una actualización de la página. Puede cambiar window.location.hash sin activar la actualización (aunque la ventana saltará si su hash coincide con un ID en la página), pero no puede deshacerse del signo de hash. Haz tu elección por lo que es peor ...

RESPUESTA MÁS ACTUALIZADA

Aquí está la respuesta correcta sobre cómo hacerlo sin sacrificar (ya sea recargar por completo o dejar el signo de hash). Dejando esta respuesta aquí, sin embargo, con respecto a ser la original en 2009, mientras que la correcta que aprovecha las nuevas API del navegador se dio 1.5 años después.

Answer 12

<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("?"));
    window.history.replaceState({}, document.title, clean_uri);
}
</script>

poner este código en la sección principal

Answer 13

const url = new URL(window.location);
url.hash = '''';
history.replaceState(null, document.title, url);