focus incorrect sur chrome lors de l'utilisation de innerHTML

Version imprimable

bonjour

je veux faire un chronomètre en haut de la page, le chrono marche mais à chaque seconde, quand je change le contenu par javascript, le curseur me remet en haut de la page là ou il y a le chrono, et m’empêche de voir le bas de la page, et c'est uniquement sur chrome, sur firefox ça marche très bien.
j'ai deux iframes invisibles et je crois que le focus se remet à chaque appel javascript à ces iframes

voilà le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<iframe id="likes" name="likes" src="#" style="width:0;height:0;border:0px solid #fff;" ></iframe>
<iframe id="datarget" name="datarget" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
<style>
.home
{
	background-color:#999;
	height:1000px;
}
</style>
 
<html>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" 
 	content="text/html; charset=ISO-8859-1"> 
<br>
  <div id=heures style="float:left;">5</div>
  <div id=minutes style="float:left;">2</div>
  <div id=secondes style="float:left;">15</div>
 
 <div class=home>
 ICI le contenu de la page
 
 </div>
 et le chrono m'emp&egrave;che de voir <u>ça</u> 
</html>
 
 
<script>
var s=15;
var m=5;
var h=12;
function timer()
{
s=s-1;
if(s==0)
{
	s=60;
	m=m-1;
}
if(m==0&&s==0)
{
	m=60;
	s=60;
	h=h-1;
}
var dah="<b>"+h+"</b>";
if(h<10)
dah="<b>0"+h+"</b>";
var dam="<b>"+m+"</b>";
if(m<10)
var dam="<b>0"+m+"</b>";
var das="<b>"+s+"</b>";
if(s<10)
var das="<b>0"+s+"</b>";
document.getElementById('heures').innerHTML="<b>"+dah+":</b>";
document.getElementById('minutes').innerHTML="<b>"+dam+":</b>";
document.getElementById('secondes').innerHTML="<b>"+das+"</b>";
window.setTimeout("timer()",1000);
}
timer();
</script>

merci d'avance

24/01/2012, 15h46
SpaceFrog

Heu rassures moi,
c'est pas l'ordre de tes balises sur la page ...
24/01/2012, 15h52
visqueu

j'ai juste pris les fragments de code nécessaires.
le problème vient de l'ordre ?
24/01/2012, 16h02
SpaceFrog

tes deux iframes sont vraiment en dehors du html ???
24/01/2012, 16h08
Bovino

Citation:

Envoyé par SpaceFrog

tes deux iframes sont vraiment en dehors du html ???

Si encore il n'y avait que ça... :no:

Le doctype dans la balise <html>, la <script> n'importe où, pas de <head> ni de <body> (même si c'est théoriquement autorisé...) et

Citation:

j'ai juste pris les fragments de code nécessaires.

ne laisse rien augurer de bon pour le reste de la page... :cry:

peut importe ou je les mets, le focus se remet toujours, après chaque seconde (après chaque appel à la fonction timer() ) sur les iframes !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" 
 	content="text/html; charset=ISO-8859-1"> 
 
<style>
.home
{
	background-color:#999;
	height:1000px;
}
</style>
 
<html>
<head>foilà</head>
<body>
<iframe id="likes" name="likes" src="#" style="width:0;height:0;border:0px solid #fff;" ></iframe>
<iframe id="datarget" name="datarget" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
 
<br>
  <div id=heures style="float:left;">5</div>
  <div id=minutes style="float:left;">2</div>
  <div id=secondes style="float:left;">15</div>
 
 <div class=home>
 ICI le contenu de la page
 
 </div>
 et le chrono m'empeche de voir <u>ça</u> 
 </body>
 
</html>
 
 
<script>
var s=15;
var m=5;
var h=12;
function timer()
{
s=s-1;
if(s==0)
{
	s=60;
	m=m-1;
}
if(m==0&&s==0)
{
	m=60;
	s=60;
	h=h-1;
}
var dah="<b>"+h+"</b>";
if(h<10)
dah="<b>0"+h+"</b>";
var dam="<b>"+m+"</b>";
if(m<10)
var dam="<b>0"+m+"</b>";
var das="<b>"+s+"</b>";
if(s<10)
var das="<b>0"+s+"</b>";
document.getElementById('heures').innerHTML="<b>"+dah+":</b>";
document.getElementById('minutes').innerHTML="<b>"+dam+":</b>";
document.getElementById('secondes').innerHTML="<b>"+das+"</b>";
window.setTimeout("timer()",1000);
}
timer();
</script>

il vaut mieux que le script aussi soit dans la page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<meta http-equiv="content-type" 
 	content="text/html; charset=ISO-8859-1"> 
 
<style>
.home
{
	background-color:#999;
	height:1000px;
}
</style>
 
</head>
<body>
foilà
<p>
<iframe id="likes" name="likes" src="#" style="width:0;height:0;border:0px solid #fff;" ></iframe>
<iframe id="datarget" name="datarget" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
 
<br>
  <div id=heures style="float:left;">5</div>
  <div id=minutes style="float:left;">2</div>
  <div id=secondes style="float:left;">15</div>
 
 <div class=home>
 ICI le contenu de la page
 
 </div>
 et le chrono m'empeche de voir <u>ça</u> <script>
var s=15;
var m=5;
var h=12;
function timer()
{
s=s-1;
if(s==0)
{
	s=60;
	m=m-1;
}
if(m==0&&s==0)
{
	m=60;
	s=60;
	h=h-1;
}
var dah="<b>"+h+"</b>";
if(h<10)
dah="<b>0"+h+"</b>";
var dam="<b>"+m+"</b>";
if(m<10)
var dam="<b>0"+m+"</b>";
var das="<b>"+s+"</b>";
if(s<10)
var das="<b>0"+s+"</b>";
document.getElementById('heures').innerHTML="<b>"+dah+":</b>";
document.getElementById('minutes').innerHTML="<b>"+dam+":</b>";
document.getElementById('secondes').innerHTML="<b>"+das+"</b>";
window.setTimeout("timer()",1000);
}
timer();
</script>
 </body>
 
</html>

24/01/2012, 17h29
visqueu

bon j'ai fait quelques bricolages
j'ai mis les iframes dans une <div style="display:none"> :aie:

mon code pue mais ça marche !

merci beaucoup