getElementById sous IE -> impossible d'accéder à l'objet HTML

**janoyolo** · 18/09/2009, 11h14

Bonjour,

Je ne sais pas si le titre est très clair mais je vais essayer d'expliquer mon problème.

J'ai un problème dans un script complexe qui m'a fait descendre à l'origine (enfin j'espère) de ce problème.

Lorsque je souhaite récupérer un objet HTML (dom ?) dans IE8, je n'arrive pas à avoir le type de l'objet.

Je vais mettre du code, ce sera plus simple.

Voici ma 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Test</title>
</head>
    <body id="conteneur">
        <table>
            <tbody>
                <tr>
                    <td><input type="text" id="toto"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<script language="javascript">alert(document.getElementById('toto'));</script>

Sous Firefox, je récupère [object HTMLInputElement]
Sous IE8, je récupère [object].

Qu'est-ce qui est incorrecte dans mon code ? Dans la configuration d'apache ?
Quelqu'un aurait une idée ?

Merci !

JanO

**E.Bzz** · 18/09/2009, 11h29

Bonjour et bienvenue sur Developpez.com

As-tu essayé

Code :

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

alert(document.getElementById('toto').type);

EDIT : ou plutôt visiblement

Code :

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

alert(document.getElementById('toto').tagName);

A+

**janoyolo** · 18/09/2009, 11h44

Alors je récupère bien 'text'.

J'ai essayer une petite méthode :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script language="javascript">
function var_dump(obj) {
   if(typeof obj == "object") {
      return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
   } else {
      return "Type: "+typeof(obj)+"\nValue: "+obj;
   }
}//end function var_dump
 
 
alert(var_dump(document.getElementById('toto')));</script>

Je n'arrive pas à récupérer le constructor et le type est "pauvre". Il n'indique que [object].

**E.Bzz** · 18/09/2009, 11h49

Mais tu veux récupérer quoi, au juste ?
Mes 2 exemples renvoient :
.type => "text"
.tagName => "INPUT"

A+

**Bovino** · 18/09/2009, 11h54

Envoyé par janoyolo

Sous Firefox, je récupère [object HTMLInputElement]
Sous IE8, je récupère [object].

C'est la même chose exprimée différemment

Les deux correspondent au même objet HTML.
Donc :

Mais tu veux récupérer quoi, au juste ?

**janoyolo** · 18/09/2009, 11h56

A vrai dire, je veux récupérer l'objet en entier.

J'ai simplifié le code car je pense que le problème vient de cette gestion de l'objet par IE mais derrière, ce document.getElementById() permet l'affichage d'un calendrier...

Si ie renvoie uniquement une partie des éléments de l'objet, ce n'est pas suffisant.

**Bovino** · 18/09/2009, 11h57

Envoyé par janoyolo

Si ie renvoie uniquement une partie des éléments de l'objet, ce n'est pas suffisant.

Quelle est la partie que IE ne renvoie pas ???

**E.Bzz** · 18/09/2009, 11h58

Envoyé par janoyolo

A vrai dire, je veux récupérer l'objet en entier.

L'objet lui-même est

Code :

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

document.getElementById('toto')

C'est d'ailleurs bien lui que tu passes à ta fonction

Tu peux ensuite en récupérer tous les attributs ...

A+

**janoyolo** · 18/09/2009, 12h03

Ce qui m'étonne, c'est le comportement d'IE.

Je crée mon fichier mapage.html avec le contenu indiqué plus haut.

Si je l'ouvre directement dans un dossier (windows) en faisant clic droit -> ouvrir avec internet explorer, l'alert me renvoie le même message sous IE que sous firefox.

Par contre, en mettant cette page sur un serveur, je ne récupère que [object] et apparemment, c'est objet n'est pas considéré comme un contenu HTML.

Je sais bien que l'objet que j'envoie est document.getElementById('toto') mais apparemment, je ne peux pas récupérer tous les attributs.

**E.Bzz** · 18/09/2009, 12h07

Envoyé par janoyolo

mais apparemment, je ne peux pas récupérer tous les attributs.

C'est à dire : lesquels manquent ?

On va finir par savoir

A+

**janoyolo** · 18/09/2009, 12h16

Lesquels manquent ?

Alors, j'aimerais bien le savoir

mais par exemple :

Code :

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

alert(document.getElementById('toto').constructor);

renvoie dans le cas présent "undefined" alors qu'il renvoie [object HTMLInputElement] sous firefox ou alors si j'exécute la page en faisant -> ouvrir avec IE.

Je ne peux donc pas vous dire quel élément manque, j'ai juste repéré que le comportement n'était pas le même en ligne avec IE comparé a firefox ou IE en local (entendez en local, non exécuté derrière un serveur web).

Ce que je voulais savoir c'est si ce comportement était connu mais je vais devoir aller fouiller un peu plus profondément dans le code pour savoir quelle est l'élément qui n'est pas récupéré.

Si vous avez des idées, je suis toujours preneur.

Merci pour vos réponses. Je laisse le sujet ouvert bien entendu.

**Bovino** · 18/09/2009, 14h21

constructor fait référence aux objets natifs de JavaScript et effectivement, Firefox implémente des objets HTMLElement, mais ce n'est absolument pas cross browser et cela ne sert que si tu souhaites ajouter des prototypes à tes objets. Pour le reste, les propriétés sont identiques (ou presque) entre IE et Firefox.

**janoyolo** · 18/09/2009, 14h59

Exactement, il y a des prototypes dans mes objets (enfin, ce ne sont pas les miens, je ne suis pas assez calé pour ça).

Il s'agit de dhtmlxCalendar et apparemment, en fouillant un peu plus, j'ai identifié là où ça me pose problème.

Deux cas de test :

- cas 1 : IE 8 derrière un serveur web

- cas 2 : IE 8 exécuté en faisant un clic droit sur ma page html et en faisant "ouvrir avec" -> IE 8 ou en utilisant firefox.

J'ai encore une fois extrait la partie de code qui me pose problème.

Ici, je veux récupérer la position absolue en PX de l'objet.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>test</title>
</head>
    <body style="position:relative; width:1000px; margin:0 auto;">
        <table>
            <tbody>
                <tr>
                    <td valign="top"><input type="text" id="toto"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<script language="javascript">
 
function getAbsoluteLeft(htmlObject){
	var xPos = htmlObject.offsetLeft;
	var temp = htmlObject.offsetParent;
 
	while (temp != null){
		xPos+=temp.offsetLeft;
		temp=temp.offsetParent;
	}
	return xPos;
}
 
 
alert(getAbsoluteLeft(document.getElementById('toto')));
</script>

Si vous l'exécutez pour le cas 1 et pour le cas 2, vous ne récupérez pas le même résultat.
Il semblerait que l'offsetParent du BODY soit le problème.

Le style se trouvant dans le body est voulu, la page doit-être centrée.

Vous avez une idée de ce comportement différent entre le cas 1 et le cas 2 ?

Merci encore pour vos messages.

**janoyolo** · 18/09/2009, 15h22

Bon, je n'apporte pas de solution mais je vais clore le sujet car j'ai contourné le problème.

Je soustrais à mon xPos retourné, la valeur de

Code :

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

document.body.offestLeft

.

Je pourrais faire en sorte de faire un break dans ma boucle mais étant donné que c'est une méthode générique, je préfère remonter au plus proche de mon code, les modifications.

Merci encore pour votre aide,

cordialement,

getElementById sous IE -> impossible d'accéder à l'objet HTML

JavaScript

Discussions similaires

Partager

Partager