Code javascript compatible FF mais incompatible IE & Chrome?

**Sebi57** · 17/06/2010, 22h45

Bonsoir chers amis de Developpez !

Voilà j'ai un petit problème ! Sur ma page html ci-dessous, j'ai un lecteur embarqué allociné (flash), j'ai placé dans un select les différentes bandes annonces disponibles pour un film par exemple. Et quand on choisis une vidéo dans le select, le code javascript se charge de changer la source de l'animation flash. Ce qui sous Firefox permet de changer dynamiquement de vidéo sans recharger notre page. Mais je viens de me rendre compte que ce code en question ne marchais pas ni sur Google Chrome ni sur Internet Explorer (Derniers versions).

Auriez vous des suggestions et/ou remarques afin de le rendre compatible et/ou améliorer le code utilisé ?

Voici le code html de 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<!-- On met un onchange() sur le select.
Il sera déclenchée à chaque fois que la valeur du selectionnée est modifiée.
Lors de cet événement, on appelle la fonction change_param() avec en paramètre
le value de l option sélectionnée. -->
<select name="bande_annonce" size="1" onchange="change_param(this.value);">
<option value="18733395">Die Hard 4 - retour en enfer - Bande-annonce 1 (Français)</option>
<option value="18733396">Die Hard 4 - retour en enfer - Bande-annonce 1 (Anglais sous-titré)</option>
<option value="18733397">Die Hard 4 - retour en enfer - Bande-annonce 2 (Anglais sous-titré)</option>
<option value="18733398">Die Hard 4 - retour en enfer - Bande-annonce 3 (Français)</option>
</select>
 
<div id="allocine_blog" style="width:625px; height:494px">
	<object width="100%" height="100%">
		<param name="movie" value="http://www.allocine.fr/blogvision/18733395" /></param>
		<param name="allowFullScreen" value="true" /></param><param name="allowScriptAccess" value="always" /></param>
		<param name="wmode" value="opaque" /></param>
		<embed src="http://www.allocine.fr/blogvision/18733395" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" wmode="opaque"></embed>
	</object>
</div>
 
<script type="text/javascript">
// Ici, on définit la fonction change_param()
function change_param(valeur) {
  // D'abord, on récupère l'élément <object> qu'on désire modifier.
  // Ici, c'est le premier <object> dans l'élément ayant pour id "allocine_blog"
  var obj=document.getElementById('allocine_blog').getElementsByTagName('object')[0],
  // On crée ensuite une chaîne ; la concaténation de l'adresse avec la valeur passée en paramètre
  url='http://www.allocine.fr/blogvision/'+valeur;
  // A partir de l'<object>, on récupère le "src" du premier <embed> et on lui attribue la chaîne
  obj.getElementsByTagName('embed')[0].src=url;
  // Même chose pour le "value" du premier <param>
  obj.getElementsByTagName('param')[0].value=url;
}
</script>
 
</body>
</html>

Merci d'avance, votre aide est précieuse !

**E.Bzz** · 18/06/2010, 09h29

Bonjour,

Envoyé par Sebi57

je viens de me rendre compte que ce code en question ne marchais pas ni sur Google Chrome ni sur Internet Explorer (Derniers versions).

Une erreur ?
Si oui, laquelle et à quel endroit ?
Sinon, la "notification des erreurs de script" est-elle bien activée ?

Tu as essayé d'accéder aux éléments via un id (plutôt que via la tagName) ?

A+

**Sebi57** · 18/06/2010, 09h41

Envoyé par E.Bzz

Bonjour,Une erreur ?
Si oui, laquelle et à quel endroit ?
Sinon, la "notification des erreurs de script" est-elle bien activée ?

Tu as essayé d'accéder aux éléments via un id (plutôt que via la tagName) ?

A+

Comment sa la notification des erreurs?

Excusez moi le javascript n'est pas ma tasse de thé.
A part le PHP / SQL / HTML je suis perdu.
En fait je vois juste que ca marche pas sous IE & Chrome mais c'est opérationnel sous FF

Comment sa accéder via un id ? Car c'est une balise <param> et non <id>

merci de votre aide

**SpaceFrog** · 18/06/2010, 09h43

comme tu as firefox ... installe firebug et regarde la console de scripts il te donnera l'erreur

**Sebi57** · 18/06/2010, 09h50

Envoyé par SpaceFrog

comme tu as firefox ... installe firebug et regarde la console de scripts il te donnera l'erreur

Bonne idée j'y avais pas pensé ! Mais FireBug m'affiche aucune erreurs JS (quoi que normal vu que le code fonctionne a souhait sous Firefox...) Il me faudrait un debuggeur sous IE & Chrome dans ce cas là

**E.Bzz** · 18/06/2010, 09h56

Envoyé par Sebi57

Comment sa la notification des erreurs?

Excusez moi le javascript n'est pas ma tasse de thé.

Heu ... je parlais du navigateur, là ... IE en l'occurrence, puisque c'est lui qui pose problème

Voir Menu Outils / Options Internet / onglet Avancé

A+

**Sebi57** · 19/06/2010, 01h48

Envoyé par E.Bzz

Heu ... je parlais du navigateur, là ... IE en l'occurrence, puisque c'est lui qui pose problème

Voir Menu Outils / Options Internet / onglet Avancé

A+

Ah, merci je connaissais pas cette possibilité !
Donc après test, IE m'indique:

Détails de l’erreur de la page Web

Message*: 'getElementsByTagName(...).0' a la valeur Null ou n'est pas un objet.
Ligne*: 39
Caractère*: 3
Code*: 0
URI*: http://localhost/video3.html

Mais je comprends pas que sa marche sous FF mais pas sous IE/Chrome =/
Une idée ? merci de votre aide

**SpaceFrog** · 19/06/2010, 09h27

il me semble bien que pour IE getElementsByTagName ne soit applicable qu'au body donc pas à un getElementById.

Il va falloir pointer autrement sur la balise object. tu ne peux pas lui mettre un id directement ?

**Sebi57** · 19/06/2010, 11h03

Envoyé par SpaceFrog

il me semble bien que pour IE getElementsByTagName ne soit applicable qu'au body donc pas à un getElementById.

Il va falloir pointer autrement sur la balise object. tu ne peux pas lui mettre un id directement ?

Comment sa ? Moi peut importe tant que sa marche ^^
Juste que je sais pas comment faire autrement

**Eric2a** · 19/06/2010, 13h05

Salut,

Perso, j'adore le duo getElementById et innerHTML.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
// Fonction change_param()
function change_param() {
var obj=document.getElementById('bande_annonce');
var url='http://www.allocine.fr/blogvision/'+obj.value;
var s='<object type="application/x-shockwave-flash" width="100%" height="100%" data="'+url+'">'+
	'	<param name="movie" value="'+url+'" \/>'+
	'	<param name="allowFullScreen" value="true" \/><param name="allowScriptAccess" value="always" \/>'+
	'	<param name="wmode" value="opaque" \/>'+
	'	<embed src="'+url+'" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" wmode="opaque"><\/embed>'+
	'<\/object>';
obj=document.getElementById('allocine_blog');
obj.innerHTML=s;
}
 
// Création d'un événement onload
function addLoadListener(func){
	if(typeof window.onload!='function')
		window.onload=func;
	else{
		var oldonload=window.onload;
		window.onload=function(){oldonload();func();}
	}
}
 
// Création et appel de l'évenement change_param() une fois la page chargée
function initVideo(){
	var obj=document.getElementById('bande_annonce');
	obj.onchange=function(){change_param();return false;};
	change_param();
}
addLoadListener(initVideo);
</script>
 
</head>
 
<body>
<select id="bande_annonce" name="bande_annonce" size="1">
<option value="18733395">Die Hard 4 - retour en enfer - Bande-annonce 1 (Français)</option>
<option value="18733396">Die Hard 4 - retour en enfer - Bande-annonce 1 (Anglais sous-titré)</option>
<option value="18733397">Die Hard 4 - retour en enfer - Bande-annonce 2 (Anglais sous-titré)</option>
<option value="18733398">Die Hard 4 - retour en enfer - Bande-annonce 3 (Français)</option>
</select>
 
<div id="allocine_blog" style="width:625px; height:494px">
	<!-- Placer ici un texte alternatif -->
</div>
 
</body>
</html>

**Sebi57** · 19/06/2010, 14h06

Envoyé par Eric2a

Salut,

Perso, j'adore le duo getElementById et innerHTML.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
// Fonction change_param()
function change_param() {
var obj=document.getElementById('bande_annonce');
var url='http://www.allocine.fr/blogvision/'+obj.value;
var s='<object type="application/x-shockwave-flash" width="100%" height="100%" data="'+url+'">'+
	'	<param name="movie" value="'+url+'" \/>'+
	'	<param name="allowFullScreen" value="true" \/><param name="allowScriptAccess" value="always" \/>'+
	'	<param name="wmode" value="opaque" \/>'+
	'	<embed src="'+url+'" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" wmode="opaque"><\/embed>'+
	'<\/object>';
obj=document.getElementById('allocine_blog');
obj.innerHTML=s;
}
 
// Création d'un événement onload
function addLoadListener(func){
	if(typeof window.onload!='function')
		window.onload=func;
	else{
		var oldonload=window.onload;
		window.onload=function(){oldonload();func();}
	}
}
 
// Création et appel de l'évenement change_param() une fois la page chargée
function initVideo(){
	var obj=document.getElementById('bande_annonce');
	obj.onchange=function(){change_param();return false;};
	change_param();
}
addLoadListener(initVideo);
</script>
 
</head>
 
<body>
<select id="bande_annonce" name="bande_annonce" size="1">
<option value="18733395">Die Hard 4 - retour en enfer - Bande-annonce 1 (Français)</option>
<option value="18733396">Die Hard 4 - retour en enfer - Bande-annonce 1 (Anglais sous-titré)</option>
<option value="18733397">Die Hard 4 - retour en enfer - Bande-annonce 2 (Anglais sous-titré)</option>
<option value="18733398">Die Hard 4 - retour en enfer - Bande-annonce 3 (Français)</option>
</select>
 
<div id="allocine_blog" style="width:625px; height:494px">
	<!-- Placer ici un texte alternatif -->
</div>
 
</body>
</html>

Merci de ton aide, sa marche très bien désormais sous FF, IE & Chrome!
Malgré une erreur sous IE: (debug)

Détails de l’erreur de la page Web

Message*: Objet requis
Ligne*: 48
Caractère*: 3
Code*: 0
URI*: video4.html

Une idée du problème ?
Sinon pour ta fonction addLoadListener, j'utilise directement le $(document).ready(function() de Jquerry

Merci encore !

**Eric2a** · 19/06/2010, 14h19

Envoyé par Sebi57

une erreur sous IE [...] Une idée du problème ?

Non,
Chez moi avec IE 8 > Outils > Outils de développement (ou directemment F12 au clavier) il n'y a aucune erreur.

**Sebi57** · 19/06/2010, 14h26

Envoyé par Eric2a

Non,
Chez moi avec IE 8 > Outils > Outils de développement (ou directemment F12 au clavier) il n'y a aucune erreur.

J'ai obtenu l'erreur avec:
Outils -> Options Internet -> Avancé -> Navigation -> Affiche une notification de chaque erreur de script.

Mais F12 aussi me l'affiche !
"Objet requis video4.html, Ligne 53 Caractère 3"
(via Script -> Démarrer le débogage)

Bizarre

**Eric2a** · 19/06/2010, 14h39

Effectivement, en placant le test en ligne (je le faisais à partir du poste de travail), je vois aussi la même erreur

Envoyé par Sebi57

Bizarre

Oui... Bizarre

**SpaceFrog** · 19/06/2010, 16h52

personnellement je fuis le innerHTML pour la creation et la generation des objets

Code :

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

<object id="truc" width="100%" height="100%">

et

Code :

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

var obj=document.getElementById('truc')

**Sebi57** · 19/06/2010, 19h50

Envoyé par SpaceFrog

personnellement je fuis le innerHTML pour la creation et la generation des objets

Code :

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

<object id="truc" width="100%" height="100%">

et

Code :

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

var obj=document.getElementById('truc')

Comment sa ? Je comprends pas concrètement

Code javascript compatible FF mais incompatible IE & Chrome?

JavaScript

Discussions similaires

Partager

Partager