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