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