Comment insérer le même code javascript plusieurs fois dans la même page?Résolu

Question

Bonjour, Voici mon soucis, je veux mettre 3 script de rotation iframe dans le meme page. Le problème c'est que je ne sais pas comment faire pour mettre le même code 3 fois sans que ça bugg, voici le code : et aussi je veux mettre le delais de rotation pour chaque iframe EX apres 10s il change la page dans l'iframe! Si quelqu'un peut m'aider à en mettre 3 dans la même page ce serait tres gentille merci d'avance

Zobibol · Accepted Answer

Bien le bonjour, la nuit portant conseil

Voilà maintenant un code "plus propre" et qui permet justement de pouvoir affecter une durée de rotation par iframe.


/**
* Properiété par défaut d'une frame.
*/
var defaultFrameProperties={
width:"330",
height:"430",
marginwidth:"0",
marginheight:"0",
hspace:"0",
vpsace:"0",
frameborder:"1",
scrolling:"no"
};

/**
* Contient la liste des intervals (il va y en avoir autant qu'il y a d'iframe).
*/
var listIntervals = new Array();

/**
* Liste des urls.
*/
var randomcontent=["P_2.html","P_3.html","P_4.html","P_5.html"];

/**
* 	liste des iframes à créer, enregistrement du type:
*	{
*		frameId:"identifiant de l'iframe à créer",
*		timerRefresh:durée de entre chaques rafraîchissement exprimé en seconde".
*/
var listFramesId = {
frames:[
{
frameId:"frame1",
timeRefresh:25
},
{
frameId:"frame2",
timeRefresh:6
},
{
frameId:"frame3",
timeRefresh:7
}
]
};

/**
* Retourne une adresse aléatoire.
*/
function getRandomUrl(){
return randomcontent[Math.floor(Math.random()*randomcontent.length)];
}


/**
* Création des frames et de leur timer respectif.
*/
function createFrames(){
// Récupération des enregistrements de type frame.
var frames = listFramesId.frames;
// Parcours ceux-ci
for ( var frs in frames){
// frs contient frameId (identifiant  de la frame) et timeRefresh (durée en seconde de rafraîchissement de celle-ci).
// création de la frame.
var frame = document.createElement("iframe");
// Affecte son identifiant.
frame.id = frames[frs].frameId;
// affecte sa source.
frame.src =getRandomUrl();
// initialisation des propriétés de la frames.
// Parcours l'enregistrement des propriétés par défaut de la frame.
for ( var i in defaultFrameProperties){
// Affecte les propriétés à l'iFrame
frame[i] =defaultFrameProperties[i];
}
// ajoute la frame au document body
document.body.appendChild (frame);
// Déclenche un interval pour la frame.
listIntervals.push (setInterval("refreshFrame('"+frames[frs].frameId+"')", frames[frs].timeRefresh * 1000));
}
}

/**
* Rafraîchit une iframe
*
* @param _id
*      identifiant de l'iFrame à rafraîchir.
*/
function refreshFrame(_id){
var iFrame = document.getElementById(_id);
iFrame.src = getRandomUrl();
}

/**
* Lors du chargement création des iframes et des timers associés
*/
window.onload=function (){
createFrames();
}

/**
* Sur déchargement de la page, "tue" les timers
*/
window.onunload = function(){
// Parcours la liste des intervalles et les stops.
for ( var i=0; i<listIntervals.length; i++){
clearInterval(listIntervals[i]);
}
}


On commence à s'éloigner du source d'origine, mais c'est pas grave.

l'utilisation de json est semble-t-il le plus indiqué pour résoudre ce problème.
Ainsi, j'ai mis en place une variable listFramesId.frames qui est typée comme ceci:
    frameId:"identifiant de l'iframe à créer",
    timeRefresh:durée de rafraîchissement en seconde.
le source est relativement commenté avec les fautes d'orthographe et autre !


[o-_-o]

Zobibol · Answer

Bien le bonjour, il faut affiner les méthodes utilisées:
tout d'abord commençons par le début (sans quoi il n'y aura jamais de fin):
Ce genre de code n'est pas très utile pour ce genre de traitement les méthodes utilisées sont toutes implémentées sur les navigateurs.

var ie= document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1


enfin, le code revus et modifié (désolé pour les quelques fautes d'orthographe et autres...


// l'utilité de ces deux variables sont plus que discutables...et complétement inutile (d'ailleurs, elles ne sont plus utilisées).
//var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1
//var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

//Specify IFRAME display attributes
var iframeprops='width=330 height=430 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"'

//Specify random URLs to display inside iframe
var randomcontent=new Array()
randomcontent[0]="P_2.html"
randomcontent[1]="P_3.html"
randomcontent[2]="P_4.html"
randomcontent[3]="P_5.html"

// liste des identifiants des frames, pour rajouter une nouvelle iFrame, il suffit simplement de rajouter un id à l'enregistrement suivant.
// Il est de plus possible d'appliquer un style directement sur les iframe via leurs identifiants.
var listFramesId = ["dynstuff", "frame1", "frame2"];

// on va ajouter autant d'iframe que préciser dans la liste des iframes (listFramesId);
for ( var i = 0; i<listFramesId.length; i++){
document.write('  ');
}
// Variable contenant le timer de rafraichissement des iframes.
var interval  = null;


function random_iframe(){
for ( var i = 0; i < listFramesId.length; i++){
// La méthode getElementById est implémenté dans la plupart des navigateurs.
var iframeobj= document.getElementById(listFramesId[i]);
// Affecte la nouvelle source à l'iframe.
iframeobj.src=randomcontent[Math.floor(Math.random()*randomcontent.length)];
}


}

/**
* Chargement de la page.
*/
window.onload=function (){
// Affichage en entrée dans la page.
random_iframe();
// et enfin, déclenche un interval (toutes les 10 secondes), interval étant exprimé en millième de seconde, 10 secondes, font donc 10000 millisecondes
interval = setInterval ("random_iframe()", 10000);
}

/**
* Fermeture de la page
*/
window.onunload = function(){
// Détruit l'interval afin d'éviter les effets de bores et une conso mémoire importante.
clearInterval( interval);
}



Voilà qui devrait être pas mal non ?


[o-_-o]

Utilisateur anonyme · Answer

Merci Zobibol ;) mais ton nouveau script n'affiche rien il fonction pas
je suis novice j'ai cherché l'erreur mais je l'ai pas trouvé .
aidez moi svp et merci pour l'effort !!!

Utilisateur anonyme · Answer

Pardon Zobibol c'etait mon erreur !Merci ca marche nickel . Merci 1000 fois 

juste je veux que chaque iframe avec sa temps  de rotation  ex : 
iframe 1 tout les  10s   iframe 2 : 15s   iframe 3 : 27s

Utilisateur anonyme · Answer

Merci Zobibol :) t'es le meilleur

Utilisateur anonyme · Answer

Bonjour 
le script marche tres bien mais il y a un petit probleme :
l'adresse du page qui affiche les iframes ce répète des centaines de fois dans l'historique du navigateur qui rendre le retour a la page précédente impossible .
une aide s'il vous plait :)

Zobibol · Answer

Re-bonjour,
oups, je n'avais pas pris en compte ce cas.
Donc, c'est la méthode refreshFrame qui ne va pas pour le fonctionnement désiré.
il suffit de la remplacer par celle-ci :

/**
* Rafraîchit une iframe
*
* @param _id
*      identifiant de l'iFrame à rafraîchir.
*/
function refreshFrame(_id){
var iFrame = document.getElementById(_id);
iFrame.contentWindow.location.replace(getRandomUrl()); ;
}


qui au lieu de faire un iFrame.src fait un replace. Ce code fonctionne avec FF et IE pour les autres...




[o-_-o]

Utilisateur anonyme · Answer

bonjour
ca marche nickel ! merci infiniment

Utilisateur anonyme · Answer

Re-bonjour :)

voila sur firefox et IE 8 les attributs des frames ne fonctionnent pas tous 

var defaultFrameProperties={
width:"330", foction
height:"430", fonction
marginwidth:"0", non
marginheight:"0", non
hspace:"0", non
vpsace:"0", non
frameborder:"1", non
scrolling:"no" fonction

saviez vous pourquoi . aidez moi s'il vous plait 
merci

Comment insérer le même code javascript plusieurs fois dans la même page?

9 réponses

Votre réponse

Discussions similaires