Evénement sur 'window.location.hash' modifié ?Résolu

Question

Bonjour à tous,

Je poste cette question ici car je n'arrive pas à trouver mon bonheur sur le net.
J'aurais voulu savoir s'il est possible d'exécuter du code javascript à la modification de l'ancrage dans l'url ?
Et si possible, sans mettre en place un timer qui analyse l'url toutes les x secondes.

Mon but consiste à produire le même comportement que gmail lorsque l'on ouvre des mails ou libellés. C'est à dire un changement d'url avec AJAX sans obliger le rechargement de toute la page.

Merci par avance,

Billou_13
Bask En Force 

--------------------------------------------------------------------
Connaître la réponse est une chose, savoir pourquoi en est une autre
---------------------

billou_13 · Accepted Answer

Bon alors, retour sur mon problème !

Je n'ai pas trouvé de meilleure solution que la mise en place d'un timer. Mais cela fonctionne assez bien.

Voici mon code javascript (il faut inclure la librairie jQuery):

//Lorsque le document est prêt, il lance la fonction Initialize
$(document).ready(Initialize());

var currentHash;
var timer;

//Initialize
function Initialize()
{
    currentHash = window.location.hash;
    timer = setInterval('VerifHash()', 1000);
}

function VerifHash()
{
    if (window.location.hash != currentHash )
    {
        //alert('Ancrage modifié !');
        currentHash = window.location.hash;
        
        //...
    }
}

Voila,

Bonne journée,

Billou_13
Bask En Force 

--------------------------------------------------------------------
Connaître la réponse est une chose, savoir pourquoi en est une autre
---------------------

Bul3 · Answer

Bonjour,

oulah....

si on change l'url, on change de page
il ne sert donc à rien de scruter l'url
       il faut mettre du javascript dans toutes les pages affcihées
       et si ces pages ne sont pas sur ton site, ne t'appartiennent,
           ça va pas être simple !
>>C'est à dire un changement d'url avec AJAX 
ajax, ne change pas l'URL ! c'est l'appel d'un script sur le serveur

Cordialement

billou_13 · Answer

Bonjour,

Merci pour ta réponse mais je ne parle pas de changement d'url, je parle de changement de l'ancrage (ce qui est après le dièse #).
Et dans ce cas: oui, on change d'url (dans la mesure où l'on admet que l'ancrage appartient à l'url); et non, on ne change pas de page => donc, pas de rechargement.

Pour être plus précis:
J'ai une page du style: http://localhost/documents.html#page=1
Et je veux passer à : http://localhost/documents.html#page=2

Ainsi, en AJAX, je peux:
1) charger la nouvelle page (de la liste des documents).
2) changer l'url sans rechargement dans la page par le navigateur. (donc possibilité de sauvegarde du lien: favoris, envoi par mail...)

Et mon test (sur lequel je travaille en ce moment) le prouve:
Si tu es sur la page "documents.html#page=1" et que tu as un lien hypertexte de la forme:
[documents.html#page=2 Page 2]
Cela fonctionne parfaitement et comme je le souhaite... ie, pas de rechargement de page mais chargement de la nouvelle liste de documents et changement d'url.

Je me demandais simplement s'il était possible de zapper l'événement onclick et de charger implicitement la nouvelle page lorsque l'on change l'ancrage.
Alors, je te l'accorde ceci est du détournement de fonctionnalité car l'ancrage ne sert pas à cela d'habitude. Mais, c'est un technique permettant de ne pas demander de recharger une page tout en ayant une url différente (donc possibilité d'ajout aux favoris).
Et gmail fonctionne exactement comme cela !

Voila tout,

Billou_13
Bask En Force 

--------------------------------------------------------------------
Connaître la réponse est une chose, savoir pourquoi en est une autre
---------------------

Bul3 · Answer

>>je parle de changement de l'ancrage (ce qui est après le dièse #).
ah !!  je n'avais pas percuté !
alors oui, si c'est la même page, pas de rechargement.

>>[documents.html#page=2 Page 2]
que fait donc ChangePage(2) ?
>>Je me demandais simplement s'il était possible de zapper l'événement
onclick 
>>et de charger implicitement la nouvelle page lorsque l'on
change l'ancrage
navré... je n'ai pas suivi.

billou_13 · Answer

Re,

Merci à toi pour ce retour.

1) Concernant la méthode "ChangePage(2)", elle exécute uniquement le process d'appel (en AJAX) de chargement de la page 2. Cette action appelle un traitement serveur qui lui retourne du code HTML qui est mis dans un div.
Résultat: au clic sur le lien:
a) l'url change
b) la liste des documents de la page 2 est chargée (en AJAX).
Et cela marche parfaitement comme ceci !

Mais, étant très pointilleux, je me posais la question suivante:
2) Peut-on éviter l'écriture de l'attribut onclick.
C'est à dire que l'on fait un lien hypertexte:
[documents.html#page=2 Page 2]
Et que l'on a une méthode dans notre code javascript (qui s'exécute implicitement lorsque l'on change l'ancrage).
//This function is implicitly called when window.location.hash changed !
function OnHashChanged()
{
   var hash = window.location.hash;
   //Récupération du numéro de la page à charger

   var result = ChangePage(numPage);//Appel AJAX

   $('#mainDiv').html(result);//jQuery
}

Peut-on brancher cette méthode à l'événement "ancrage modifié" ?

Merci,

Billou_13
Bask En Force 

--------------------------------------------------------------------
Connaître la réponse est une chose, savoir pourquoi en est une autre
---------------------

Bul3 · Answer

>>a) l'url change
>>b) la liste des documents de la page 2 est chargée (en AJAX).
>>Et cela marche parfaitement comme ceci !
certes...tu veux que je te dise ?.... tu te compliques la vie.

billou_13 · Answer

lol, je savais que tu dirais ça ^^
Mais en fait, ma question, comme je te l'ai dit est pointilleuse mais elle n'est pas sans sens.

En fait, il existe 1 cas (qui n'arrivera pas tous les jours, je te l'accorde) où cela a un intérêt:
Si l'utilisateur change l'ancrage à la main dans la barre d'url et cliques sur entrée, l'ancrage va bien changer dans l'url mais la page ne sera pas chargée car le code javascript de ChangePage(..) ne sera pas exécuté.
Alors que dans gmail, cela marche (il me semble).

Voila pourquoi je veux être pointilleux :-p

Merci encore,

Billou_13
Bask En Force 

--------------------------------------------------------------------
Connaître la réponse est une chose, savoir pourquoi en est une autre
---------------------

Bul3 · Answer

sauf que gmail ne fait sûrement pas de la manière dont tu veux le faire...

billou_13 · Answer

Surement, c'est pourquoi j'aimerais savoir comme ils font... :)
Ou que l'on me donne une manière qui comble mon besoin fonctionnel ^^

Billou_13
Bask En Force 

--------------------------------------------------------------------
Connaître la réponse est une chose, savoir pourquoi en est une autre
---------------------

Bul3 · Answer

>>qui comble mon besoin fonctionnel
parfaitement d'accord.
"il suffit" sûrement que tu nous l'exprimes,
pas en javascript/html mais fonctionnellement,
pas une solution possible mais le but.
enfin... pour moi, qui suis dur à la comprenette,
incapable de résoudre/de faire ( quel handicap ! ) sans piger.

billou_13 · Answer

Je ne vois pas comment je pourrais être plus précis qu'avec mes derniers posts.
Je veux simplement savoir comment récupérer l'événement de changement d'ancrage afin d'exécuter du javascript.
Alors, je veux bien vous dire pourquoi j'en ai besoin... mais cela n'avancera pas mon besoin qui est : récupérer l'event window.location.hash has changed.

Comme je l'avais dit dès le début, j'avais fait des recherches sur le net et cela donne:
- http://bytes.com/topic/javascript/answers/504229-detect-change-location-hash [solution avec timer]
- http://bytes.com/groups/javascript/429824-notice-change-window-location-hash-without-polling [apparement, pas possible sans timer ou boucle de vérification de la valeur]
- http://www.bigresource.com/JAVASCRIPTS-Notice-change-of-window-location-hash-without-polling-WZpG3SaA.html [pas de réponse...]

C'est pourquoi je me tourne vers ce forum.

Je pense que je vais conclure que cela n'est pas possible sans timer.

Merci quand même.

Billou_13
Bask En Force 

--------------------------------------------------------------------
Connaître la réponse est une chose, savoir pourquoi en est une autre
---------------------

Bul3 · Answer

>>Je veux simplement savoir comment récupérer l'événement de 
>>changement d'ancrage  afin d'exécuter du javascript.
ça, ce n'est pas le but, mais le moyen que tu envisages 
     pour faire ce à quoi tu veux arriver...
>>comment je pourrais être plus précis
c'est comme tu le sens
d'autres intervenants comprendront, devineront sûrement
@+

@karamel · Answer

bonjour

il doit surement y avoir des iframes c'est pour ca que la page n'est pas recharge

cs_daddy11world · Answer

En fait il est interessant de mettre tout tes liens avec 

href="pasdeJSactif.php" 
onclic="
   changer_ancre();
   analiser_ancre();
   return false;
   "

Comme ça, les utilisateurs sans JS on accès à une page php (pasdeJSactif.php) qui rempli les même fonction que le script ajax. Les utilisateurs avec js executent le onclic, ce qui donne :

changer_ancre : fonction du style  document.location.href=memepage.php#monancre

analiser_ancre : fonction qui récupére la valeur de l'ancre, avec window.location.hash, puis execute la requette ajax en concéquence.

return false qui indique au navigateur de ne pas prendre en compte l'attribu href du lien, puisqu'on veut rester sur la même page.

billou_13 · Answer

Bonjour,

Merci pour l'info daddy11world, je ne comprennais pas bien l'intérêt de mettre un "href" + "onclick". Avec ton exemple, cela donne tout son sens.

Pour faire un retour sur ma décision, j'ai bien fait comme je disais: mise en place d'un timer qui vérifie l'url toutes les X ms. Et cela fonctionne impec.

Bonne journée à tous,

Billou_13

--------------------------------------------------------------------
Connaître la réponse est une chose, savoir pourquoi en est une autre
---------------------

Evénement sur 'window.location.hash' modifié ?

15 réponses

Votre réponse

Discussions similaires