focus incorrect sur chrome lors de l'utilisation de innerHTML

**visqueu** · 24/01/2012, 15h19

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 :

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
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

**SpaceFrog** · 24/01/2012, 15h46

Heu rassures moi,
c'est pas l'ordre de tes balises sur la page ...

**visqueu** · 24/01/2012, 15h52

j'ai juste pris les fragments de code nécessaires.
le problème vient de l'ordre ?

**SpaceFrog** · 24/01/2012, 16h02

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

**Bovino** · 24/01/2012, 16h08

Envoyé par SpaceFrog

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

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

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

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

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

**visqueu** · 24/01/2012, 16h08

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 :

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
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>

**SpaceFrog** · 24/01/2012, 16h24

il vaut mieux que le script aussi soit dans la page

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
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>

**visqueu** · 24/01/2012, 17h29

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

mon code pue mais ça marche !

merci beaucoup

focus incorrect sur chrome lors de l'utilisation de innerHTML

JavaScript

Discussions similaires

Partager

Partager