javascript - Borrar URL hash

html url-routing

Question

Visite stackoverflow.com/#_=_ y window.location.hash evalúa como #_=_ . Multa.

Ahora ejecute window.location.hash = '''' para borrar el hash, y la URL se convierte en stackoverflow.com/# . (Observe el # final).

¿Por qué el # en window.location.hash incluye o excluye inconsistentemente? ¿Cómo se puede eliminar el # de la URL sin volver a cargar la página?

( MDN dice

[el hash es] la parte de la URL que sigue al símbolo #, incluido el símbolo #.

pero eso no es cierto en el caso de un hash vacío.)

Answer 1

Hay 2 cosas que conducen este comportamiento:

• "La configuración de la propiedad hash se desplaza al ancla con nombre sin volver a cargar el documento". ( here )
• "Cuando configura el objeto de ubicación o cualquiera de sus propiedades excepto el hash [...] en JavaScript 1.1 y versiones posteriores, el efecto de la configuración de la ubicación depende de la configuración del usuario para comparar un documento con el original a través de la red". ( here )

Básicamente, la configuración de la propiedad hash nunca debería llevar a una recarga, la configuración de cualquier otra propiedad debería llevar a una recarga (o quizás una E-Tag / modificada desde que se verifique el encabezado, según la configuración del navegador).

Asumiría que, en aras de la coherencia, los creadores de navegadores transforman la configuración de un hash vacío, a la configuración de "#" como hash. De esta manera, la url en la barra de ubicación no lleva a una recarga. Pero esta última parte es pura especulación.

Answer 2

He estado lidiando con el mismo problema hace unas dos semanas y mi conclusión fue que no había una buena solución. No hay una solución directa; eliminar el hash de la URL siempre obligó al navegador a volver a cargar la página, e incluso si existiera una solución similar a un hackeo, preferiría tener el hash al final de la URL que utilizar soluciones poco claras.

Answer 3

Para responder a la segunda pregunta (eliminando el # sin una actualización de página):

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

Answer 4

Respondiendo a tu primera pregunta:

De acuerdo con el MDN en Mozilla.org: "la parte de la URL que sigue al símbolo #, si la hay, incluido el símbolo #. Cadena vacía si la url no contiene # o no tiene nada después del #. "

Curiosamente, ese documento se acaba de actualizar el 4/8/2013. No estoy seguro si eso fue agregado después de que verificaste la documentación.

Por cierto (y en referencia a las respuestas), window.location.hash y pushState son conceptos diferentes aunque relacionados.