Reload d'une page sur FF et IE

**Casio** · 19/06/2012, 14h51

Salutations,

Bien que je me débrouille tant bien que mal en PHP, je suis une nouille en javascript.
J'ai bidouillé un code pour les besoins de la chose, pompé à droite, à gauche et censé servir à re-charger une image au bout d'un certain laps de temps (pour une CAM IP temps réel).

Tout marche merveilleusement sous Chrome, et un peu sous Safari, mais pas du tout sous IE et Firefox...

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(...)
<p><img title="Ateliers WDA" alt="Ateliers WDA" src="http://xxxxxxxx:85/snapshot.cgi?user=wda&pwd=" name="myobject" height="360" width="480"  border="1px" />
 
	<script language="JavaScript"> 
 
	function reloadImage() { 
		  var now = new Date();
		  if (document.images) { 
			  document.images.myobject.src = 'http://xxxxxxx:85/snapshot.cgi?user=wda&pwd='; 
		  }
		 setTimeout('reloadImage()',2000);
	} 
 
 
	setTimeout('reloadImage()',2000);
 
	</script></p>
(...)

L'ensemble est visible ici :
-=> http://atelier.wda-fr.org

Qu'en pensez-vous ?

A vous lire,

**vermine** · 19/06/2012, 14h58

Bonjour,

Tout d'abord je mettrais mes scripts dans le <head> et non en plein milieu de la page.

Ensuite, j'utiliserais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript">

Ou bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script>

pour une page HTML5.

Et finalement, j'utiliserais une autre syntaxe pour sélectionner l'image en lui précisant un id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("id_myobject").src

**andry.aime** · 19/06/2012, 15h00

Bonjour,

1-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript">

2- Donne un id à l'image ensuite

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("idImage").src='http://xxxxxxx:85/snapshot.cgi?user=wda&pwd=';

3- Vire les setTimeout. Utilise un setInterval

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript"> 
 
	function reloadImage() { 
		  var now = new Date();
			  document.getElementById("idImage").src = 'http://xxxxxxx:85/snapshot.cgi?user=wda&pwd='; 
	}
setInterval( function(){reloadImage();} , 2000);
	</script>

A+.

**Casio** · 19/06/2012, 15h03

Pour les <head>, c'est compliqué, car la page est un include d'include... ;-)

Pour les autres solutions, je vais tester cela ;-)

**Bovino** · 19/06/2012, 15h37

Accessoirement et pour résoudre ton problème, quitte à définir une variable now (ce qui est une bonne idée), autant l'utiliser dans l'URL du src de l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("idImage").src = 'http://xxxxxxx:85/snapshot.cgi?user=wda&pwd=&tt=' + now;

**Casio** · 19/06/2012, 18h46

J'ai bien tout suivi à la lettre, néanmoins du coup, plus aucun refresh sur Chrome non plus.

J'ai du merdouiller quelque part.

Voici donc le code actuel complet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
(...)
<p><img title="Ateliers WDA" alt="Ateliers WDA" src="http://mondns.hd.free.fr:85/snapshot.cgi?user=wda&pwd=" name="myobject" height="360" width="480"  border="1px" />
 
	<script type="text/javascript"> 
 
	function reloadImage() { 
		  var now = new Date();
			  document.getElementById("idImage").src = 'http://mondns.hd.free.fr:85/snapshot.cgi?user=wda&pwd='; 
	}
setInterval( function(){reloadImage();} , 2000);
	</script></p>
(...)

**vermine** · 19/06/2012, 18h52

Votre tag <img> n'a pas l'attribut id sur lequel vous faites un getElementById.

**Casio** · 19/06/2012, 19h25

indeed... sorry ...

J'ai donc now :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
(...)
<p><img title="Ateliers WDA" alt="Ateliers WDA" src="http://mondns.hd.free.fr:85/snapshot.cgi?user=wda&pwd=" id="camip1" name="camip1" height="360" width="480"  border="1px" />
 
	<script type="text/javascript"> 
 
	function reloadImage() { 
		  var now = new Date();
			  document.getElementById("camip1").src = 'http://mondns.hd.free.fr:85/snapshot.cgi?user=wda&pwd='; 
	}
setInterval( function(){reloadImage();} , 2000);
	</script></p>
(...)

Cela remarche sur Chrome, mais toujours rien sur IE ni FireFox... :-(

**Eric2a** · 19/06/2012, 20h59

Salut,

Dans le dernier exemple, la variable now n'est toujours pas utilisée.

Elle est nécessaire pour s'assurer que le navigateur télécharge une nouvelle fois l'image au lieu d'utiliser celle en cache.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function reloadImage(){
	var now=new Date();
	document.getElementById('camip1').src='http://mondns.hd.free.fr:85/snapshot.cgi?user=wda&pwd=&tt='+now;
}
setInterval(reloadImage,2000);