web-dev-qa-db-fra.com

Forcer le rechargement de page avec des ancres html (#) - HTML & JS

Supposons que je suis sur une page appelée /example#myanchor1 où myanchor est une ancre dans la page . J'aimerais faire un lien vers /example#myanchor2, mais force le rechargement de la page en même temps.

La raison en est que je lance js pour détecter l'ancre à partir de l'URL lors du chargement de la page . Le problème (comportement normalement attendu) ici est que le navigateur m'envoie simplement à cette ancre spécifique sur la page sans recharger la page. .

Comment pourrais-je m'y prendre? JS va bien.

javascriptjqueryhtmlanchor
29
Yuval Karmi

Je suggérerais de surveiller l'ancre dans l'URL pour éviter un rechargement, c'est à peu près le point d'utiliser des ancres pour contrôler le flux. Mais toujours ici va. Je dirais que la meilleure façon de forcer un rechargement en utilisant un simple lien d'ancrage serait d'utiliser

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

où à la place de $random, insérez un nombre aléatoire (en supposant que "fictif" n’est pas interprété côté serveur). Je suis sûr qu'il existe un moyen de recharger la page après la mise en place de l'ancre, mais il est probablement plus difficile que de simplement réagir à la mise en place de l'ancre et de faire les choses dont vous avez besoin à ce stade.

Là encore, si vous rechargez la page de cette façon, vous pouvez simplement mettre myanchor2 en tant que paramètre de requête et restituer votre serveur côté serveur.

Modifier
Notez que le lien ci-dessus rechargera dans toutes les circonstances, si vous ne devez recharger que si vous n'êtes pas déjà sur la page, vous devez rendre la variable fictive plus prévisible, comme cela.

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

Je recommanderais quand même de surveiller le hash.

31
falstro

Aussi simple que ça

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

un exemple

19
Qwerty

Quel est l’intérêt d’utiliser JS côté client si vous voulez continuer à recharger la page tout le temps de toute façon? Il serait peut-être préférable de surveiller le hachage pour vérifier les modifications même lorsque la page n'est pas rechargée.

Cette page a une bibliothèque de moniteur de hachage et un plugin jQuery qui va avec.

Si vous voulez vraiment recharger la page, pourquoi ne pas utiliser une chaîne de requête (? Foo) au lieu d'un hachage?

4
Matti Virkkunen

Une autre option qui n’a pas encore été mentionnée consiste à lier les écouteurs d’événements (à l’aide de jQuery par exemple) aux liens qui vous tiennent à cœur (peut-être tous, voire non) et à demander à l’auditeur d’appeler n’importe quelle fonction. tu utilises.

Editer après le commentaire

Par exemple, vous pourriez avoir ce code dans votre code 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>

Ensuite, vous pouvez ajouter le code suivant pour lier et répondre aux liens:

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

Notez que j’utilise le sélecteur jQuery class pour sélectionner les liens que je veux «surveiller», mais vous pouvez utiliser le sélecteur sélecteur de votre choix.

Selon le fonctionnement de votre code existant, vous devrez peut-être modifier la manière dont vous le transmettez (vous devrez peut-être créer une URL complète, y compris le nouveau hachage, et la transmettre, par exemple. http: // www. exemple.com/exemple#myanchor1 ), ou modifiez le code existant pour accepter le nouveau code que vous lui transmettez.

3
Blair McMillan

Ma solution préférée, inspirée par une autre réponse est:

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

Le lien href ne sera pas suivi afin que vous puissiez utiliser vos propres préférences, par exemple: "" ou "#".

Même si j'aime la réponse acceptée, je trouve cela plus élégant car il n'introduit pas de paramètre étranger. Et les réponses de @ Qwerty et de @ Stilltorik faisaient disparaître le hachage après le rechargement pour moi.

2
Dário

Une autre façon de faire consiste à définir l'URL et à utiliser window.location.reload() pour forcer le rechargement.

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

En gros, la setTimeout retarde le rechargement. Comme il n'y a pas de return false dans onclick, la href est effectuée. L'URL est alors modifiée par la variable href et ce n'est qu'après que la page est rechargée.

Pas besoin de jQuery, et c'est trivial.

2
Stilltorik

Voici quelque chose comme ce que j'ai fait (où "anc" n'est utilisé pour rien d'autre):

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

Et en charge:

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 fonction getURLParameter est depuis ici

2
bourne2program

Essayez ceci son aide pour moi  

<a onclick="location.href='link.html'">click me</a>

Dans votre balise d'ancrage au lieu de

<a href="link.html">click me </a>

0
prashant kute