Recharger la page avec des ancres html ( # ) - HTML & JS
dis que je suis sur une page appelée /example#myanchor1 où myanchor est une ancre dans la page.
J'aimerais créer un lien vers /example#myanchor2 , mais forcer la page à se recharger en même temps.
la raison est que j'exécute js pour détecter l'ancre à partir de l'url à la charge de la page. Le problème (comportement normalement attendu) ici cependant, est que le navigateur m'envoie juste à cette ancre spécifique sur la page sans recharger la page.
Comment faire? JS est OK.
7 réponses
je suggère de surveiller l'ancre dans L'URL pour éviter une recharge, c'est à peu près le point d'utilisation des ancres pour le contrôle-débit. Mais encore ici, va. Je dirais que la façon la plus simple de forcer une recharge à l'aide d'une simple ancre-lien serait d'utiliser
<a href="?dummy=$random#myanchor2"></a>
où au lieu de $random insérer un nombre aléatoire (en supposant que" dummy " ne soit pas interprété du côté du serveur). Je suis sûr qu'il y a un moyen de recharger la page après avoir mis l'ancre, mais c'est probablement plus difficile alors simplement réagir à l'ancre étant mis et faire les choses dont vous avez besoin à ce point.
encore une fois, si vous rechargez la page de cette façon, vous pouvez simplement mettre myanchor2 comme paramètre de requête à la place, et rendre votre côté stuff server.
Modifier
Notez que le lien ci-dessus se rechargera en toutes circonstances, si vous n'avez besoin de recharger que si vous n'êtes pas déjà sur la page, vous devez avoir le variable fictive être plus prévisible, comme so
<a href="?dummy=myanchor2#myanchor2"></a>
je recommande tout de même de surveiller le hachage.
Quel est l'intérêt d'utiliser JS côté client si vous allez continuer à recharger la page tout le temps de toute façon? Il serait peut-être préférable de surveiller le hachage pour voir s'il y a des changements, même si la page n'est pas rechargée.
cette page possède une bibliothèque de moniteurs de hachage et un plugin jQuery pour aller avec.
si vous voulez vraiment recharger la page, Pourquoi ne pas utiliser une chaîne de requête (?foo) au lieu d'une table de hachage?
une autre option qui n'a pas encore été mentionnée est de lier les écouteurs d'événements (en utilisant jQuery par exemple) aux liens qui vous intéressent (peut-être tous, peut-être pas) et d'amener l'auditeur à appeler n'importe quelle fonction que vous utilisez.
Modifier après le commentaire de
par exemple, vous pouvez avoir ce code dans votre 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>
alors, vous pouvez ajouter le code suivant de lier et de répondre à la 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 jquery sélecteur de classe pour sélectionner les liens que je veux" surveiller", mais vous pouvez utiliser n'importe quel sélecteur que vous voulez.
en fonction de la façon dont votre code existant fonctionne, vous pouvez avoir besoin de modifier comment/ce que vous lui passez (peut - être que vous aurez besoin de construire une URL complète incluant le nouveau hachage et passer que-par exemple. http://www.example.com/example#myanchor1 ), ou modifier le code existant pour accepter ce que vous lui passez de votre nouveau code.
une autre façon de le faire est de définir l'url, et d'utiliser window.location.reload() pour forcer la recharge.
<a href="/example#myanchor2"
onclick="setTimeout(location.reload.bind(location), 1)">
</a>
en gros, le setTimeout retarde le rechargement. Comme il n'y a pas de return false dans l'onclick, le href est exécuté. L'url est alors changée par le href et seulement après cela est la page rechargée.
pas besoin de jQuery, et c'est trivial.
voici quelque chose comme ce que j'ai fait (où "anc" n'est pas utilisé pour autre chose):
<a href="/example?anc=myanchor2"></a>
et 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 fonction getURLParameter est de ici
ma solution préférée, inspirée de une autre réponse est:
<a href="#myanchor2" onclick="location.hash='myanchor2'; location.reload();">myanchor2</a>
href ne sera pas suivi de sorte que vous pouvez utiliser votre propre préférence, 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 ont fait disparaître le hachage après avoir rechargé pour moi.