innerHTML dans IE7

**Oscar Hiboux** · 13/05/2009, 15h15

Envoyé par Auteur

exemple indigeste avec innerHTML :
http://www.developpez.net/forums/d73...rhtml-firefox/

Beurk ! C'est carrément de l'abus là...

Je comprends qu'on utilise "innerHTML" pour glisser du contenu par ci, par là - du contenu généré par le serveur le plus souvent - mais générer du contenu à la main, côté client, dans une grosse chaîne. AÏE ! Là, quitte à être verbeux, autant le faire proprement en créant des éléments DOM. Sinon il y a d'autres techniques utilisant des templates côté client mais on s'égare...

Envoyé par Auteur

innerHTML et les tableaux :
http://www.developpez.net/forums/d66...nnerhtml-ie-_/
http://www.developpez.net/forums/d49...l/#post2947182 (regarde le lien que j'ai placé dans mon message #9)

Note : tu verras dans mon test plus bas qu'il est néanmoins possible (FF/IE7) de créer un tableau dans son ensemble même si on ne peut lui ajouter de rangées / cellules après coup.

Envoyé par Auteur

bonjour,
J'ai trouvé cette documentation qui dit que innerHTML est en lecture seule pour les balises :
COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

En effet, c'est une limitation intéressante à connaître. Merci pour ton lien.

Envoyé par Auteur

innerHTML et les listes déroulantes :
http://www.developpez.net/forums/d64...nte-dynamique/
etc.

En effet, IE7 ne veut rien entendre en passant par innerHTML.

On a fait on bon tour je crois ! Merci pour votre participation, ça nous fait réviser.

J'ai fait un p'tit test rapide pour les points évoqués. Voici le code (il faudra inclure prototype.js pour l'exécuter - la flemme, c'était déjà en place, j'allais pas m'en priver ^^'). J'ai repris les cas évoqués dans cette discussion, y compris l'ajout d'un champ au formulaire pour voir s'il est bien soumis : la réponse est oui.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="/resources/scripts/prototype.js"></script>
        <title>innerHTML</title>
        <style>
            table tr {
                background: #AACCFF;
            }
            table td {
                border: 2px dashed #3399CC;
            }
        </style>
        <script>
            Event.observe(window, "load", function(event) {
                var table = $$("table")[0];
 
                $("addRowButton").observe("click", function(event) {
                    var row = $("addRowButton").up("tr");
                    var dummy = new Element("div");
                    dummy.innerHTML = "<tr><td colSpan='2'>pouet</td></tr>";
                    var sibling = null;
                    $A(dummy.childNodes).each(function(node) {
                        row.insertBefore(node, sibling);
                        sibling = node;
                    });
                });
 
                $("addChoiceButton").observe("click", function(event) {
                    var list = $("fieldD");
                    list.innerHTML += "<option value='4'>4</option>";
                });
 
                $("addFieldButton").observe("click", function(event) {
                    var cell = $("fieldD").up();
                    cell.innerHTML += "<input name='E' id='fieldE' value='w'/>";
                });
 
                $("addTableButton").observe("click", function(event) {
                    document.body.innerHTML += "<table><tr><td>pouet</td></tr></table>";
                });
            });
        </script>
    </head>
    <body>
        <form name="test" action="http://jungle/test-innerHTML.php" method="POST">
            <table>
                <tr>
                    <td><label for="fieldA">A</label></td>
                    <td><input name="A" id="fieldA"/></td>
                </tr>
                <tr>
                    <td><label for="fieldB">B</label></td>
                    <td><input name="B" id="fieldB"/></td>
                </tr>
                <tr>
                    <td><label for="fieldC">C</label></td>
                    <td><input name="C" id="fieldC"/></td>
                </tr>
                <tr>
                    <td><label for="fieldD">D</label></td>
                    <td>
                        <select name="D" id="fieldD">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colSpan="2">
                        <button id="addRowButton" type="button">Add Row</button>
                        <button id="addFieldButton" type="button">Add Field</button>
                        <button id="addChoiceButton" type="button">Add Choice</button>
                        <button id="addTableButton" type="button">Add Table</button>
                        <button type="submit">Go!</button>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Code :

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

1
2
3
4
<?
    var_dump($_POST);
//    header("Location: test-innerHTML.html");
?>

**le_chomeur** · 13/05/2009, 15h17

pas sous tous les navigateur je peux te l'assurer

**Oscar Hiboux** · 13/05/2009, 17h20

Merci pour la mise en garde !

Sois sûr que je prendrai ces informations en considération si d'aventure j'avais à supporter d'autres navigateurs que FF / IE7+ et que je faisais des trucs dégueulasses avec innerHTML (ce qui n'est pas le cas, j'aimerais rassurer ceux qui en doutaient; il fallait bien qqun pour faire l'avocat du diable...

)

**Auteur** · 13/05/2009, 23h21

Envoyé par Oscar Hiboux

Beurk ! C'est carrément de l'abus là...

Je comprends qu'on utilise "innerHTML" pour glisser du contenu par ci, par là - du contenu généré par le serveur le plus souvent - mais générer du contenu à la main, côté client, dans une grosse chaîne. AÏE !

oh j'ai vu pire

Exemple en tête : tout le code d'une pop-up (balises HTML, CSS, script, etc.) contenu dans une chaine de caractères !
Ce code a été ensuite intégré dans la pop-up par un joli :

Code javascript :

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

1
2
3
 
popup = window.open();
popup.document.body.innerHTML = toutLeCodeDeLaPage;

Visiblement c'est... "plus facile" que d'ouvrir une pop-up avec un minimum de code HTML qui sera ensuite complété par un script utilisant le DOM

Cette horreur revient de temps à autre

**Oscar Hiboux** · 13/05/2009, 23h29

Ahah, que du bonheur !..

(P.S. : Il m'éclate trop ce smiley

)

innerHTML dans IE7

JavaScript

Discussions similaires

Partager

Partager