Comment controler et enregister le rendu par le navigateur de 500 pages d'un site web grace à des cookies et javascript..
Pour conserver un rendu aussi proche que possible du livre original, le site 'flore-dulac' utilise des positionnements absolus et des tailles de caractères définies.
La vérification visuelle du résultat peut passer à côté de quelques anomalies introduites par les polices et leur rendu.
Javascript et les cookies permettent d'enregistrer des informations facilitant la mise au point du site flore-dulac qui contient plus de 500 pages.
Des variations selon les polices sont susceptibles de masquer en partie des informations. On va donc examiner les zones masquées et enregistrer les résultats dans notre ordinateur par l'intermédiaire de cookies .
Pour chaque page du site, on crée un cookie si une anomalie est détectée; (il faudra ensuite parcourir toutes les pages)
Le cookie devra garder la mémoire de l'anomalie de rendu et de la page où l'anomalie a été détectée.
La fonction qui crée (si besoin) le cookie est appelée par 'onload' placé dans chaque document;
function place_cookie()
{nom_cookie=location.href.split(".html")[0];
/*le nom de chaque fichier du site se termine par le numéro de la page*/
nom_cookie=nom_cookie.split( "-")
nom_cookie=nom_cookie[nom_cookie.length-1];
contenu_cookie=""+renseigne_cookie()
if (nom_cookie != "" && nom_cookie!= null && contenu_cookie.length>1 ) {
setCookie(nom_cookie, contenu_cookie, 365);}
}
La fonction 'renseigne cookie' examine les div en partie masqués par le rendu du navigateur et renvoie les informations à stocker dans le cookie;
function renseigne_cookie()
{
tous_les_divs=document.body.getElementsByTagName("div");
contenu_local="!"
for (i = 0; i < tous_les_divs.length; i++)
{
ecart=parseFloat(tous_les_divs[i].scrollWidth)-parseFloat(tous_les_divs[i].style.width);
if (ecart>10) /* on ne garde l'information que pourles zones masquées supérieures à 10 px*/
/*le caractère 'µ' est utilisé comme séparateur de champ*/
/* le cookie contient donc, le numéro de la balise,la largeur masquée (arrondie), la largeur visualisée, la largeur qui aurait été nécéssaire, le texte concerné*/
{contenu_local=contenu_local+i+"µ"+ecart.toFixed(1)+"µ" + parseFloat(tous_les_divs[i].style.width).toFixed(1)+"µ" +parseFloat(tous_les_divs[i].scrollWidth).toFixed(1)+"µ"+tous_les_divs[i].innerText;
} /* fin if*/
} /* fin for*/
return contenu_local;}/*fin fonction*/
Voici la fonction 'setCookie()' qui crée le cookie.
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Il reste à balayer toutes les pages du site ; Pour cela on crée un document contenant une référence à chaque page à examiner.
Dans mon cas ce document a été réalisé en VBA et j'ai placé la référence à chaque page dans une balise <a>
Et on inclut le script qui va ouvrir et refermer les pages une à une.
La fonction 'balayage()' (appelée par onload) va ouvrir une nouvelle fenêtre toute les trois secondes (et refermer la précédente).
var liste_as
var num_fen
var intervalle
var la_fen
function balayage(){
liste_as=document.body.getElementsByTagName("a");
num_fen=0 ;
intervalle=setInterval(ferme_ouvre,3000,num_fen);
}
/* toutes les 3 secondes on ouvre une nouvelle page et on ferme la précédente*/
function ferme_ouvre()
{if (num_fen!=0) la_fen.close(liste_as[num_fen-1].href);/*on ferme celle qui était ouverte*/
if (num_fen
if (num_fen==liste_as.length ) clearInterval(intervalle);/*c'est fini*/
num_fen+=1;/*sera la prochaine fenêtre*/
}
Les renseignements recueillis sont facilement utilisables par exemple avec 'Edit This cookie', une extension du navigateur Opera. Cette extension permet la visualisation, mais aussi l'exportation au format CSV.
Par exemple sur la page 130, la balise <div> numéro 28 qui contient une accolade aurait du occuper une largeur de 31.0 pixel mais est tronquée à 19.3pixel, soit un 'masque' de 11.7 pixel..
