bug childNodes et IE 7.0

**autofill** · 16/07/2009, 15h22

Bonjour à tous,

J'espère qu'il y a des pros du javascript par ici !!

Est-ce que qqn peut m'expliquer pq, lorsque je clique sur le bouton de ma page, le code contenu dans le div "monDiv" se dédouble en partie sous Internet Explorer 7.0.
Sous FireFox 3.5, le bug ne se produit pas.

Ok je sais que le contenu de mon div est bizarre pcq on ne peut pas imbriquer des , mais je dois faire avec, désolé ...

C'est un bout de code que j'ai fortement simplifié pour espérer avoir de l'aide de votre part, et pq pas une solution (qui sait, ça fait une semaine que je cherche, mais bon, l'espoir fait vivre comme on dit

)

Page complète à ouvrir dans Internet Explorer :

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
<html>
  <head>
    <script type="text/javascript">
      function getResult(oNode) {
        document.getElementById('result').value = '';
        getXhtml(oNode, document.getElementById('result'));
      }
 
      function getXhtml(oNode, objInput) {
        switch (oNode.nodeType) {
          case 1: // element
            objInput.value += "<" + oNode.nodeName;
 
            if (oNode.canHaveChildren || oNode.hasChildNodes()) {
              objInput.value += ">";
 
              for (var i = 0; i < oNode.childNodes.length; i++) {
                getXhtml(oNode.childNodes[i], objInput);
              }
 
              objInput.value += "</" + oNode.nodeName + ">";
            } else {
              objInput.value += " />";
            }
 
            break;
 
          case 3: // text
            objInput.value += oNode.nodeValue;
            break;
        }
      }
    </script>
  </head>
  <body>
    <div id="monDiv">
      <p id="id1">
        <font id="id2">
          <p id="id3">texte1</p>
        </font>
      </p>
      <p id="id4">texte2</p>
    </div>
 
    <br/><br/>
    <input type="button" value="Pourquoi est-ce que le code se dédouble quand on clique sur ce bouton ??! :-(" onclick="javascript:getResult(document.getElementById('monDiv'));"/>
    <br/><br/>
    <input type="text" id="result" value="" size="150"/>
  </body>
</html>

Donc si vous avez bien compris mon code, tout ce que je souhaite, c'est récupérer tout le contenu du div dans le champ de type "text".

Une seule contrainte : ne pas utiliser l'innerHTML.

Merci

**SpaceFrog** · 16/07/2009, 15h45

tu utilises un nodeCleaner ?

sous IE y'a aussi innerText sinon avec DOM il y a data

**autofill** · 16/07/2009, 16h12

Non je n'utilises pas de nodeCleaner, je ne vois pas trop ce que c'est cela dit, si ce n'est que j'ai une petite idée via son nom ....

Je vais faire qqs recherches à ce sujet, merci.

Sinon je ne peux pas utiliser le innerText car je dois conserver les tags.
En fait je dois vraiment garder mon code, mais trouver ce qui provoque le bug et le corriger.
Je suis obligé de faire des boucles sur les éléments via DOM pcq au final je dois supprimer des attributs, en modifier d'autres etc.

**autofill** · 17/07/2009, 11h02

Bonjour,

Suite à mes tentatives précédentes pour essayer de solutionner un problème, j'essaie d'une autre manière ...

J'ai réussi à reproduire le bug qui me pose tant de problèmes via le code ci-dessous.
Pour tester ce code, il faut ouvrir la page dans Internet Explorer puis faire une petite manip :

1) Faire un double click sur "texte4"
2) Appuyer sur CTRL+C
3) Faire un double click sur "texte2"
4) Appuyer sur CTRL + V
5) Cliquer sur le bouton

Le code html du span se copie dans le textearea en dessous.
Comme vous pouvez le constater, ce code est mal formaté (le tag de fermeture est mal positionné).

Avez-vous une solution pour que le se positionne convenablement lors de la manip ? Ou une idée de code que je pourrais rajouter par la suite pour soit supprimer toutes les balises mal positionnées, ou les re-positionner, ou que sais-je encore ...

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
<script language="JavaScript" type="text/javascript">
  function CopyContent(sHtmlSource, sTextTarget) {
    document.getElementById(sTextTarget).innerText = document.getElementById(sHtmlSource).innerHTML;
  }
</script>
 
<span id="memoVisible" contentEditable="true" style="width:500px">
  <p><font color="#ff0000">texte1 texte2 texte3</font></p>
  <p>texte4</p>
</span>
 
<br/><br/>
<button onclick="CopyContent('memoVisible', 'areaInvisible');">Faire un double click sur "texte4" -> CTRL+C puis double click sur "texte2" -> CTRL+V puis click sur ce bouton (le code html retourné sera mal formatté)</button>
<br/><br/>
<textarea id="areaInvisible" style="width:500px; height:100px;"></textarea>

Merci.

**franculo_caoulene** · 17/07/2009, 11h25

contenteditable est un attribut HTML5. Peut-être largement implémenté, mais probablement pas de la même façon dans les différents navigateurs. De plus, HTML5 étant encore au statut de brouillon, je pense que les comportements des différents navigateurs risquent de changer. Pour finir, HTML5 n'implémente pas de balise .

En conclusion, je n'utiliserais pas encore contenteditable à ta place.

**autofill** · 17/07/2009, 14h03

C'est clair que ce n'est pas ce qu'il y a de plus standard, mais je dois faire avec.

Je pense que je vais encore chercher après autre chose pcq je tourne en rond

**E.Bzz** · 17/07/2009, 14h24

Envoyé par franculo_caoulene

En conclusion, je n'utiliserais pas encore contenteditable à ta place.

Et plus du tout 

A+

bug childNodes et IE 7.0

JavaScript

Discussions similaires

Partager

Partager