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>
Suivre ce site :
G+
RSS 2.0