Eliminar fragmento en URL con JavaScript sin causar recargo de página

Fondo: Tengo una página HTML que le permite expandir cierto contenido. Como solo se deben cargar pequeñas porciones de la página para dicha expansión, se realiza a través de JavaScript y no a través de una nueva página URL/HTML. Sin embargo, como un bono, el usuario es capaz de permalink a dichas secciones ampliadas, es decir, enviar a otra persona una URL comoEliminar fragmento en URL con JavaScript sin causar recargo de página

http://example.com/#foobar

y tienen abrirse la categoría "foobar" inmediatamente para que otro usuario. Esto funciona usando parent.location.hash = 'foobar', entonces esa parte está bien.

Ahora la pregunta: Cuando el usuario cierra una categoría, en la página, quiero vaciar el fragmento de URL de nuevo, es decir, convertir http://example.com/#foobar en http://example.com/ para actualizar la pantalla enlace permanente. Sin embargo, hacerlo usando parent.location.hash = '' causa una recarga de toda la página (en Firefox 3, por ejemplo), que me gustaría evitar. El uso de window.location.href = '/#' no activará la recarga de una página, pero deja el signo "#" de aspecto un tanto desagradable en la URL. Entonces, ¿hay alguna forma en los navegadores populares de eliminar JavaScript un anclaje de URL que incluya el signo "#" sin activar una actualización de página?

Fuente

2008-11-06 Philipp Lenssen

Este [pregunta relacionada] (http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for) es una lectura interesante . –

Como han mencionado otros, replaceState en HTML5 se puede utilizar para eliminar el fragmento de URL.

Aquí se muestra un ejemplo:

// remove fragment as much as it can go without adding an entry in browser history: 
window.location.replace("#"); 

// slice off the remaining '#' in HTML5:  
if (typeof window.history.replaceState == 'function') { 
    history.replaceState({}, '', window.location.href.slice(0, -1)); 
}

Fuente

2012-12-11 16:20:07 Matmas

Solid. Agradezco la detección de la capacidad de eliminar el #, pero compatible con versiones anteriores. –

Siento decirlo, pero la respuesta es no, si el vaciado location.hash no cumplir con la tarea! -)

Fuente

2008-11-06 15:20:35 roenving

¿Puede esto ser verdad? –

Esta respuesta necesita ser eliminada. Está completamente mal y tiene más votos que al menos una respuesta correcta. – atomless

Puesto que usted está controlando la acción sobre el valor hash, ¿por qué no utilizar una señal de que los medios "nada", como "#_" o "#default".

Fuente

2008-11-06 15:22:40

Creo que esta es una idea digna de consideración. –

Sí, también puede usar un delimitador en blanco, por lo que la URL termina siendo http://example.com/#. Esto es casi perfecto, pero creo que también puede terminar siendo un poco confuso para algunos visitantes. Lo ideal es que ni siquiera ese personaje hash muestre ... –

Obviamente. Sus scripts deberían funcionar sin nada en el hash. –

-1

$(document).ready(function() { 
     $(".lnk").click(function(e) { 
      e.preventDefault(); 
      $(this).attr("href", "stripped_url_via_desired_regex"); 
     }); 
    });

Fuente

2008-11-06 15:28:42 Florin

Gracias, Florin, ¿podría explicarme qué hace este código? –

a fin de utilizar

parent.location.hash = '' primera

luego hacer

window.location.href=window.location.href.slice(0, -1);

Fuente

2009-07-16 16:58:19

+12

cambiando location.href de cualquier manera volverá a cargar la página. – Evgeny

Eso sí funciona para deshacerse del fragmento completo, incluido el '#', pero Evgeny tiene razón, vuelve a cargar la página – JCarter

También hay otra opción en lugar de utilizar hachís, usted podría utilizar javascript: void(0); Ejemplo: <a href="javascript:void(0);" class="open_div">Open Div</a>

supongo que también depende de cuando se necesita ese tipo de enlace, por lo que mejor comprobar los siguientes enlaces:

Cómo se usa: http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ o detectar debate sobre lo que es mejor aquí: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Fuente

2011-01-05 09:29:51 jazkat

-2

Como otros he dicho, no puedes hacerlo. Además ... en serio, como el autor jQuery Ajaxy - He implementado sitios web completos de Ajax desde hace años - y puedo garantizar que ningún usuario final se haya quejado o tal vez haya notado que está ocurriendo esto, los usuarios no lo hacen Cuídate mientras funcione y obtengan lo que buscan.

Una solución adecuada es sin embargo HTML5 pushState/replaceState/popstate ;-) que no necesita el identificador fragement-más: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history Para un proyecto de HTML5 y compatible con HTML 4 que soporta esta funcionalidad Estado HTML5 echa un vistazo a https://github.com/browserstate/History.js: -)

Fuente

2011-01-05 09:58:20 balupton

Hay mejores razones para hacerlo que "el usuario le importa". Por ejemplo: https://wistia.com/blog/fresh-url –

Puede utilizar los nuevos y brillantes métodos HTML5 window.history.pushState y replaceState, como se describe en ASCIIcasts 246: AJAX History State y on the GitHub blog. Esto le permite cambiar la ruta completa (dentro del mismo host de origen) no solo el fragmento.Para probar esta función, browse around a GitHub repository con un navegador reciente.

Fuente

2011-01-06 19:44:29

poner este código en sección de la cabeza.

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

Fuente

2016-01-07 16:52:09

Eliminar fragmento en URL con JavaScript sin causar recargo de página

Respuesta

Cuestiones relacionadas