Accueil > Divers (et d’été) > Informatique > A propos de Spip > Concilier la navigation Ajax et les signets

Concilier la navigation Ajax et les signets

mercredi 28 juillet 2010, par Paul Courbis

La technologie Ajax permet de ne rafraichir qu’une partie de la page HTML affichée, améliorant ainsi le confort de consultation pour l’utilisateur. Malheureusement, cette technique de navigation ne met pas à jour l’adresse affichée dans la barre de navigation : en cas de création d’un signet (bookmark), c’est l’adresse de la page d’entrée qui est mémorisée, et non la page courante.

Il est cependant possible de palier cet inconvénient par une simple astuce en javascript.

Le principe est simple : il est possible de modifier partiellement l’URL de la page courante sans en provoquer le rechargement, en ajoutant la référence à une ancre via le symbole ’#’ en fin d’URL. Ce type de notation est prévu, à l’origine, pour une navigation interne à la page sans rechargement complet de cette dernière via des balises de type ’<a name=’ancre’>’

Le système va fonctionner en deux étapes :

Première étape : modifier le lien appelant

Il suffit de rajouter aux balises ’<a href=...’ un appel JavaScript de type ’onClick’ ajoutant un identifiant de la sous-page cible par la modification de la variable ’document.location.hash’.

Ceci donne par exemple :

<a class="ajax" href=/La-meteo-du-RER-mis-a-jour-en.html?id_page=201006 onclick='document.location.hash="201006";'>

Ainsi, lors de l’appel qui ne va mettre à jour qu’une partie de la page, l’URL va être modifiée et recevoir le suffixe ’#201006’

Seconde étape : dans la partie rechargée, récupérer l’identifiant

La technique est simple, on insère un code Javascript qui récupère la valeur courante de l’ancre et qui la compare à l’identifiant de la page rechargée. Si elles diffèrent, on provoque alors un rechargement complet de la page (via une modification de la variable ’document.location.href ’), en passant les arguments nécessaires à sa reconstruction avec les bonnes informations. Ainsi dans la page correspondant à l’identifiant ’20100725’, suffit-il alors d’insérer le code Javascipt suivant :

<SCRIPT Language='JavaScript'>
  var ancre = document.location.hash.substring( 1 );
  if ( ancre != "" && ancre != "20100725" )
  {
     document.location.href = "http://www.courbis.fr/La-meteo-du-RER-mis-a-jour
-en.html?id_page=" + ancre;
  }
</SCRIPT>

Cette technique est utilisée sur ce site, par exemple pour la navigation Ajax de « La météo du RER », avec un code Javascipt légèrement plus évolué qui calcule automatiquement l’identifiant de la page courante et l’URL de la page cible à partir de la balise Spip ’#SELF’ :

<SCRIPT Language='JavaScript'>
<!--
// Script permettant la gestion de signets compatibles avec une navigation
// de type "ajax"

// On recupere l'ancre sans le #
var ancre=document.location.hash.substring( 1 );

// Adresse de la page courante
var current_url="Voyage-au-centre-de-la-HP48-s-sx,133.html";

// Nom de l'argument a retrouver dans l'URL
var variable_name = "id_page=";

// Sa position (-1 si non trouve)
var id_pos = current_url.search( variable_name );

// Variables pour le calcul de la page cible en cas de redirection
var base_url;
var extra;
var site="http://www.courbis.fr/";

// Si l'argument est present, recuperer sa valeur
if ( id_pos >= 0 )
{
  var full_id=current_url.substring( id_pos+variable_name.length );
  var trim=full_id.search( "[^0-9]]" );
  var id;

  if( trim >= 0 )
  {
     id=full_id.substring(0, trim);
  }
  else
  {
     id=full_id;
  }

  // On en profite pour stocker l'adresse de base et les eventuels autres
  // parametres

  base_url=current_url.substring(0, id_pos + variable_name.length );

  if ( trim >= 0 )
  {
     extra=full_id.substring( trim );
  }
  else
  {
     extra = "";
  }
}
else
{
  // Si aucun argument n'est précisé, c'est le sommaire
  id = "sommaire";
  base_url=current_url + "?" + variable_name;
  extra="";
}

// Si la valeur de l'ancre ne correspond pas à la page affichee, on
// provoque une redirection

if ( ancre != "" && ancre != id )
{
    document.location.href = site + base_url + ancre + extra;
}

// -->
</SCRIPT>

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Les spams donneront systématiquement lieu à dépôt de plainte. Les messages comportant trop de fautes d'orthographe seront purement et simplement supprimés.
ipv6 ready ipv6 test
Suivre ce site :
Recommander cette page :
Bookmark and Share
Traduire :