juillet
2011
Voici un petit tutoriel JS.
Le but est de voir comment exécuter du JavaScript à l’intérieur des iframes.
On va essayer de coder un script qui entoure toutes les images de la page.
1. Première version du script :
var imgs = document.getElementsByTagName('img');
if (imgs != null) {
<span style="color:#777;">// Pour chaque image</span>
for (var i=0; i<imgs.length; i++) {
<span style="color:#777;">// On applique une bordure rouge</span>
imgs[i].style.border = "5px red solid";
}
}
2. Les iframes
Mais en JavaScript, lorsque que l’on fait query du type « document.getElementsByTagName() », il ne concerne que le document principal.
Si celui-ci contient des iframes, elles ne seront pas impactées par le script.
On peut donc modifier notre script pour prendre en compte les iframes :
<span style="color:#777;">// On récupère le document à partir de la fenêtre</span>
var doc = win.document;
<span style="color:#777;">// On récupère toutes les images du document</span>
var imgs = doc.getElementsByTagName('img');
if (imgs != null) {
<span style="color:#777;">// Pour chaque image</span>
for (var i=0; i<imgs.length; i++) {
<span style="color:#777;">// On applique une bordure rouge</span>
imgs[i].style.border = "5px red solid";
}
}
<span style="color:#777;">// On relance pour les sous fenêtres du document</span>
for (var i=0; i<win.frames.length; i++) {
border_image(win.frames[i]);
}
}
<span style="color:#777;">// On lance pour la fenêtre principale</span>
border_image(window);
3. Gestion des erreurs
Ce script va générer une erreur « Access denied » sur de nombreux sites.
Car on ne peut accéder au document d’une iframe qui n’est sur le même domaine que la fenêtre principale.
Du coup on ne peut pas modifier en JavaScript une iframe qui n’est pas chez nous.
Par exemple, si on insère le bouton « Like » de Facebook, on ne peut pas y accéder en JavaScript.
On va donc modifier le script pour pouvoir éviter ce genre d’erreurs :
var doc
<span style="color:#777;">// On essaye de récupérer le document à partir de la fenêtre</span>
try {
doc = win.document;
} catch(e) {}
<span style="color:#777;">// Si on a pu accéder au document</span>
if (doc != null) {
<span style="color:#777;">// On récupère toutes les images du document</span>
var imgs = doc.getElementsByTagName('img');
if (imgs != null) {
<span style="color:#777;">// Pour chaque image</span>
for (var i=0; i<imgs.length; i++) {
<span style="color:#777;">// On applique une bordure rouge</span>
imgs[i].style.border = "5px red solid";
}
}
<span style="color:#777;">// Pour chaque sous fenêtres du document</span>
for (var i=0; i<win.frames.length; i++) {
<span style="color:#777;">// On relance la fonction</span>
border_image(win.frames[i]);
}
}
}
<span style="color:#777;">// On lance pour la fenêtre principale</span>
border_image(window);
4. Optimisation mémoire
On peut encore améliorer un peu ce script.
Dans la version précédente, la fonction border-image() restait en mémoire puisqu’elle est déclarée en variable globale.
Ce serait mieux de la déclarer en variable locale.
Pour cela, on peut mettre notre code à l’intérieur d’une fonction anonyme :
(function (){
var border_image = function(win) {
<span style="color:#777;">// On essaye de récupérer le document à partir de la fenêtre</span>
var doc
try {
doc = win.document;
} catch(e) {}
<span style="color:#777;">// Si on a pu accéder au document</span>
if (doc != null) {
<span style="color:#777;">// On récupère toutes les images du document</span>
var imgs = doc.getElementsByTagName('img');
if (imgs != null) {
<span style="color:#777;">// Pour chaque image</span>
for (var i=0; i<imgs.length; i++) {
<span style="color:#777;">// On applique une bordure rouge</span>
imgs[i].style.border = "5px red solid";
}
}
<span style="color:#777;">// Pour chaque sous fenêtres du document</span>
for (var i=0; i<win.frames.length; i++) {
<span style="color:#777;">// On relance la fonction</span>
border_image(win.frames[i]);
}
}
}
<span style="color:#777;">// On lance pour la fenêtre principale</span>
border_image(window);
})();
Cette version du script fonctionne sur tous les sites et ne prend aucune place en mémoire !
En espérant que ça vous ait plu,
Thomas.