Discussion :

[kristen44]

Bonjour,

Un dictionnaire en ligne affiche un formulaire permettant d'écrire un mot, le serveur renvoie la traduction et des exemples. L'adresse dans la barre reste toujours la même à chaque nouvelle page affichée.

Sur chacune des pages, l'utilisateur _peut_ accéder à des informations supplémentaires via un bouton. La technique utilisée est celle des ancres. La barre d'adresse affiche dans ce cas l'adresse suivie de '#quelque_chose'.
Le problème est qu'ensuite la navigation page précédente ou suivante (avec les flèches) s'arrête donc deux fois sur la page correspond à ce mot : une fois sans le # et une fois avec.

Je voudrais que l'utilisateur puisse naviguer sans revenir sur cette ou ces page(s) supplémentaires. Est-ce possible ? J'ai recherché du côté de window.history, mais j'avoue que je suis largué. Merci de votre aide.

[SpaceFrog]

Éventuellement en gérant les liens en javascript au lieu de les laisser aux href avec du location.replace ?

[kristen44]

Éventuellement en gérant les liens en javascript au lieu de les laisser aux href avec du location.replace ?

Ils sont gérés en JS mais apparemment la seule mention d'un :target dans la feuille de style suffit à générer un #... dans la barre d'adresse

[SpaceFrog]

Oui elle suffit à gérer, mais si tu laisses le href opérer le lien est ajouté dans la liste history, si tu inhibes le href au moyen d'un preventDefault et que tu fais le redirection en js avec un self.location.replace je pense qu'il n'ajoutera pas l'url avec ancre dans l'history ..

[kristen44]

si tu inhibes le href au moyen d'un preventDefault et que tu fais le redirection en js avec un self.location.replace je pense qu'il n'ajoutera pas l'url avec ancre dans l'history ..

Qu'entends-tu par inhiber le href ?

Pour l'instant, je patauge... mais surement dans les bonnes eaux : j'ai effectivement une URL qui ne rentre pas dans l'historique de navigation, mais ce n'est pas la bonne :
Le clic amène à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function allervoirailleurs(){
window.location.replace('#ancre');
return false;
}

Effectivement l'URL d'origine (disons www.monsite.fr) n'est plus dans l'historique mais juste www.monsite.fr#ancre... Bref, l'inverse de ce que je voudrais.
J'ai essayé de placer un event.prevenDefault(); avant le replace, ça rend le lien inopérant. Après, le lien marche mais c'est toujours www.monsite.fr#ancre qui reste dans l'historique.

[SpaceFrog]

inhiber le href = empecher le navigateur de lancer la requete de changement de page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function allervoirailleurs()(e) {
  e.preventDefault();
window.location.replace('#ancre');
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="www.google.fr" onclick="allervoirailleurs()"> ne pas aller sur google</a>

[kristen44]

Mais je veux atteindre l'ancre !

[SpaceFrog]

tu l'atteins au moyen du location replace js. l'inhibition ne concerne que le href ...

[kristen44]

Bon, j'ai trouvé un petit truc qui me satisfait à moitié : connaissant par avance le hash (c'est bien comme ça que ça s'appelle ?) qui peut être rajouté à l'adresse du site (#openModal), j'exécute ce bout de code à l'évènement onLoad :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var url_= location.href;
if (url_.indexOf('openModal')!== -1) {window.history.go(-1);}

et hop, on saute l'indésirable !

Pas compliqué. L'ennui, c'est que :
1 - ça ne marche qu'avec la touche page précédente, pas suivante. Il faudrait détecter laquelle c'est et remplacer go(-1) par go(1).
2 - la page se charge quand même pour rien... du moins je crois que onLoad n'est appelé qu'une fois la page chargée.

[kristen44]

ou plus mieux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var petard = window.location.hash;
if (petard=='#openModal') {window.history.go(-1);}

[kristen44]

éh.... non ! je n'arrivais pas à écrire un code satisfaisant dans tous les cas avec ces fichues ancres... Du coup, j'ai réécrit la création de la fenêtre modale sans ancre (pur CSS) et fini les problèmes !