Recarga de la página Force con anclajes html (#) - HTML & JS

Question

Supongamos que estoy en una página llamada /example#myanchor1 donde myanchor es un ancla en la página. Me gustaría vincular al /example#myanchor2, pero forzar la página para volver a cargar mientras lo hace.

La razón es que ejecuto js para detectar el ancla de la url en la carga de la página. El problema (comportamiento normalmente esperado) aquí, es que el navegador simplemente me envía a ese anclaje específico en la página sin volver a cargar la página.

¿Cómo podría hacerlo? JS está bien.

Answer 1

Sugiero monitorear el ancla en la URL para evitar una recarga, ese es el punto de usar anclas para control-flujo. Pero aún aquí va. Yo diría que la forma más fácil de forzar una recarga utilizando un simple enlace de ancla sería utilizar

<a href="?dummy=$random#myanchor2"></a> 

, donde en lugar de $random insertar un número aleatorio (suponiendo lado del servidor "de prueba" no se interpreta). Estoy seguro de que hay una manera de volver a cargar la página después de establecer el ancla, pero probablemente sea más difícil que simplemente reaccionar ante el anclaje que se está configurando y hacer las cosas que necesita en ese momento.

Por otra parte, si vuelve a cargar la página de esta manera, puede simplemente poner myanchor2 como un parámetro de consulta en su lugar, y mostrar su lado del servidor de cosas.

Editar
Tenga en cuenta que el enlace anterior se volverá a cargar en todas las circunstancias, si sólo se necesita para recargar si no se encuentra en la página, es necesario tener la variable ficticia sea más predecible, al igual que

<a href="?dummy=myanchor2#myanchor2"></a> 

Aun así, recomendaría solo monitorear el hash.

Answer 2

¿De qué sirve usar el JS del lado del cliente si de todos modos vas a seguir recargando la página todo el tiempo? Puede ser una mejor idea controlar el hash para ver los cambios incluso cuando la página no se recarga.

This page tiene una biblioteca de monitores hash y un complemento jQuery para ir con ella.

Si realmente desea volver a cargar la página, ¿por qué no utilizar una cadena de consulta (? Foo) en lugar de un hash?

Answer 3

Otra opción que aún no se ha mencionado es enlazar detectores de eventos (usando jQuery por ejemplo) a los enlaces que le interesan (pueden ser todos ellos, pueden no serlo) y hacer que el oyente llame a cualquier función tu usas.

Edición después comentario

Por ejemplo, es posible que tenga este código en el código HTML:

<a href="example#myanchor1" class="myHash">example1</a> 
<a href="example#myanchor2" class="myHash">example2</a> 
<a href="example#myanchor3" class="myHash">example3</a> 

A continuación, se podría añadir el siguiente código para enlazar y responder a los enlaces:

<script type="text/javascript"> 
    $('a.myHash').click(function(e) { 
     e.preventDefault(); // Prevent the browser from handling the link normally, this stops the page from jumping around. Remove this line if you do want it to jump to the anchor as normal. 
     var linkHref = $(this).attr('href'); // Grab the URL from the link 
     if (linkHref.indexOf("#") != -1) { // Check that there's a # character 
      var hash = linkHref.substr(linkHref.indexOf("#") + 1); // Assign the hash to a variable (it will contain "myanchor1" etc 
      myFunctionThatDoesStuffWithTheHash(hash); // Call whatever javascript you use when the page loads and pass the hash to it 
      alert(hash); // Just for fun. 
     } 
    }); 
</script> 

Tenga en cuenta que estoy usando jQuery class selector para seleccionar los enlaces que quiero 'monitorear', pero puede usar wh lo que sea selector que desee.

Dependiendo de cómo funciona su código existente, puede necesitar modificar cómo y qué pasa a él (quizás necesite construir una URL completa incluyendo el nuevo hash y pasarlo a través, por ejemplo http://www.example.com/example#myanchor1), o modifique el código existente para aceptar lo que le pasa desde su nuevo código.

Answer 4

Otra forma de hacerlo es configurar la url y usar window.location.reload() para forzar la recarga.

<a href="/example#myanchor2" 
    onclick="setTimeout(location.reload.bind(location), 1)"> 
</a> 

Básicamente, el setTimeout retrasa la recarga. Como no hay return false en el clic, se ejecuta href. La URL se cambia por el href y solo después de eso se vuelve a cargar la página.

No hay necesidad de jQuery, y es trivial.

Answer 5

Aquí es algo así como lo que hice (donde "CNA" no se utiliza para cualquier otra cosa):

<a href="/example?anc=myanchor2"></a> 

Y onload:

window.onload = function() { 
    var hash = document.location.hash.substring(1); 
    if (hash.length == 0) { 
     var anc = getURLParameter("anc"); 
     if (anc != null) { 
      hash = document.location.hash = anc; 
     } 
    } 
} 

La función getURLParameter es de here

Answer 6

Simple como ese

<a href="#hardcore" onclick="location.reload()">#hardcore</a> 

an example

Answer 7

Mi solución favorita, inspirado por another answer es:

<a href="#myanchor2" onclick="location.hash='myanchor2'; location.reload();">myanchor2</a> 

href vínculo no se siguió esta manera puede utilizar su propia preferencia, por ejemplo: "" o "#".

Aunque me gusta la respuesta aceptada, me parece más elegante ya que no introduce un parámetro extraño. Y las respuestas de @Qwerty y @ Stilltorik estaban causando que el hash desapareciera después de volver a cargarlo.