[Web] Changer le src d'un iframe régulièrement

[Booster2ooo]

Attention, jQuery =/= javascript, c'est une surcouche du js qui permet une manipulation du DOM nettement simplifiée. (En l'occurence, donc notre exemple, jQuery ne sert strictement à rien, il complexifie même un peu les choses)

Par contre, je me permets de te contredire aaSSfxxx (même si je comprends bien le point de vu ). Ce petit snippet est un très bon exercice de débutant en javascript. Il permet de mettre en pratique les tableaux, la méthode getElementById qui est très utilisée et la fonction setInterval qui peut souvent s'avérée utile.

Je vais prendre la peine d'expliquer le snippet JS:
// Déclaration des variables et functions (sachant qu'en Javascript, une fonction peut être référencée via un nom de variable)
// On commece par déclarer un tableau siteList contenant nos urls. On aurait pu l'écrire comme ceci:
// var siteList = new Array('http://n-pn.fr/forum/showthread.php?tid=2031', ...)
var siteList = [
'http://n-pn.fr/forum/showthread.php?tid=2031'
, 'http://n-pn.fr/index.php?mod=tuto'
, 'http://n-pn.fr/index.php?mod=challenges'
]
// Toujours dans le bloque de déclaration, nous ajoutons la variable qui va servir au timer, ici une variable nommée interval d'une valeur de 5000
, interval = 5000 // 5secs
// On déclare une nouvelle variable buffer utilisée comme pile FIFO qui est un clone de siteList (le .slice(0) étant un petit trick permettant de dupliquer le tableau.)
// Si on avait mis buffer = siteList alors buffer n'aurait été qu'un alias de siteList, référenceant la même instance du tableau. Les opérations sur buffer
// auraient donc été faites sur siteList aussi (les deux étant le même tableau sous un nom différent)
, buffer = siteList.slice(0)

// On déclare maintanant la fonction qui va changer la source de l'iframe. On déclare donc une variable du nom next qui a pour valeur une fonction sans paramettre
, next = function() {
// Si notre pile buffer est vide, alors on reclone siteList
if(buffer.length == 0) buffer = siteList.slice(0);
// On accèdes à l'attribut src de notre iframe après l'avoir recherchée via son id dans le document et on lui passe la 1ere valeur entrée dans la pile
// qui par la même occasion lui est retirée (à la pile --> FIFO)
document.getElementById('iTarget').src = buffer.shift();
}
// On ferme le bloque de déclaration "var"
;

/* Tout ce qui ci dessus aurait pu s'écrire comme ceci: (déconseillé, je l'écris pour clarifier les choses car la synthaxe utilisée ci dessus peut être déconcertante)
var siteList = new Array('http://n-pn.fr/forum/showthread.php?tid=2031', 'http://n-pn.fr/index.php?mod=tuto', 'http://n-pn.fr/index.php?mod=challenges');
var interval = 5000;
var buffer = siteList.slice(0);
function next() {
if(buffer.length == 0) buffer = siteList.slice(0);
document.getElementById('iTarget').src = buffer.shift();
}
*/

// On execute une 1er fois notre fonction next() (on fait donc sauter la 1er valeur de la pile buffer et on s'en sert pour définir la source de l'iframe)
next();
// On lancer un timer qui executera notre fonction next() toutes les <interval> milisecondes, soit 5000 (5secondes)
// (Notez que dans la version jQuery, j'ai du utilisé une fonction anonyme pour faire l'appel à next() à cause de la portée de la fonction. En effet, comme elle est déclarée dans le scope de $(document).ready(), elle n'est pas accessible par setInterval qui rechercherait la fonction next() dans le scope global)
setInterval("next()", interval);

Ce qui, indenté et sans comment, donne bien:

Code :

var siteList = [
                        'http://n-pn.fr/forum/showthread.php?tid=2031'
                        , 'http://n-pn.fr/index.php?mod=tuto'
                        , 'http://n-pn.fr/index.php?mod=challenges'
                    ]
        , interval = 5000 // 5secs
        , buffer = siteList.slice(0)    
        , next = function() {
                if(buffer.length == 0) buffer = siteList.slice(0);
                document.getElementById('iTarget').src = buffer.shift();
            }
        ;

    next();
    setInterval("next()", interval);