Comment remplacer innerHTML. [Résolu]

Dos · 11/08/2011, 16h58

Bonjour,
Bon vous l'aurez compris je ne suis pas au top niveau JavaScript...
J'ai un code qui me sert à imprimer un <DIV>, là c'est simple, mais une fois écrit je me aperçu que le innerHTML est a bannir pour cause de compatibilité. (j'ai testé... ça marche mal sur ff et Chrome).
Le problème c'est que je ne trouve pas de code simple (et compréhensible) pour le faire. Auriez vous la solution? (donc simple et compréhensible pour un novice)

Voici mon code :

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
    function imprime_zone(titre, obj) 
            {
            // Définie la zone à imprimer
            var zi = document.getElementById(obj).innerHTML;
 
            // Ouvre une nouvelle fenetre
            var f = window.open("", "ZoneImpr", "height=600, width=885,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
 
 
            // Ajoute les Données
            f.document.title = titre;
            f.document.body.innerHTML += "" + zi + "";
 
            // Imprime et ferme la fenetre
            f.window.print();
            f.window.close();
}

Willpower · 11/08/2011, 17h14

Citation:

Envoyé par Dos

Bonjour,
Bon vous l'aurez compris je ne suis pas au top niveau JavaScript...
J'ai un code qui me sert à imprimer un <DIV>, là c'est simple, mais une fois écrit je me aperçu que le innerHTML est a bannir pour cause de compatibilité. (j'ai testé... ça marche mal sur ff et Chrome).
Le problème c'est que je ne trouve pas de code simple (et compréhensible) pour le faire. Auriez vous la solution? (donc simple et compréhensible pour un novice)

Voici mon code :

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
    function imprime_zone(titre, obj) 
            {
            // Définie la zone à imprimer
            var zi = document.getElementById(obj).innerHTML;
 
            // Ouvre une nouvelle fenetre
            var f = window.open("", "ZoneImpr", "height=600, width=885,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
 
 
            // Ajoute les Données
            f.document.title = titre;
            f.document.body.innerHTML += "" + zi + "";
 
            // Imprime et ferme la fenetre
            f.window.print();
            f.window.close();
}

qu'entends-tu par "marche mal" ?

as-tu essayé "document.write" (proscris dans certains cas, j'ignore si ça l'est pour le tien qui est assez particulier)

Bovino · 11/08/2011, 17h18

Il faut surtout attendre que la page soit chargée avant d'essayer d'y intégrer du contenu...

Code :

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

1
2
3
4
5
6
7
var zi = document.getElementById(obj).innerHTML;
var f = window.open("", "ZoneImpr", "height=600, width=885,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
f.onload = function(){
            // Ajoute les Données
            f.document.title = titre;
            f.document.body.innerHTML +=zi;
}

Dos · 11/08/2011, 17h36

Merci, j'ai rajouter un pause, juste pour voir... pareil.
-> Outre la mise en page qui saute, je perds tous les liens vers les gif...

Loceka · 12/08/2011, 09h44

Pour ma part, je trouve qu'utiliser les méthodes DOM est très simple et compréhensible. De plus ça permet de mieux comprendre le fonctionnement du DOM. Par contre il faut reconnaître que ça prend plus de temps à écrire qu'un innerHTML et que la syntaxe est plus lourde.

Les fonctions/attributs à utiliser sont les suivants :

createElement(...)
setAttribute(..., ...)
createTextNode(...)
appendChild(...)
replaceChild(..., ...)
insertBefore(..., ...)
firstChild
data
parentNode
childNodes

Normalement tu n'as pas besoin de plus que ça.

MonsieurSmith · 12/08/2011, 09h53

L'ennui est que si tu essaies d'ouvrir une fenêtre sans page, eh bien... tu ne devrais pas avoir de page dans cette fenêtre... donc pas de document... donc pas de BODY à remplir... (il me semble qu'IE affiche par défaut un document vierge, mais pas Firefox...

)

Pourquoi ne pas créer un canevas de page vide à ouvrir dans ta popup ?

Code :

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

1
2
3
4
5
6
7
8
9
ma_page_vierge.html :
 
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Puis, dans ton script, une ligne (tu devineras laquelle) à remplacer par :

Code :

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

var f = window.open("ma_page_vierge.html", "ZoneImpr", "height=600, width=885,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");

Hope this helps !

Dos · 29/08/2011, 09h37

Merci a tous,
Je m'en suis sorti en retravaillant ma page. Mais je note la méthode...

11/08/2011, 17h36	#4
Dos Membre du Club Vincent Thevenet Ingénieur développement logiciels Inscription : janvier 2003 Messages : 124 Détails du profil Informations personnelles : Nom : Vincent Thevenet Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : janvier 2003 Messages : 124 Points : 48 Points : 48	Merci, j'ai rajouter un pause, juste pour voir... pareil. -> Outre la mise en page qui saute, je perds tous les liens vers les gif... __________________ Dos
	00

12/08/2011, 09h44	#5
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Pour ma part, je trouve qu'utiliser les méthodes DOM est très simple et compréhensible. De plus ça permet de mieux comprendre le fonctionnement du DOM. Par contre il faut reconnaître que ça prend plus de temps à écrire qu'un innerHTML et que la syntaxe est plus lourde. Les fonctions/attributs à utiliser sont les suivants : createElement(...) setAttribute(..., ...) createTextNode(...) appendChild(...) replaceChild(..., ...) insertBefore(..., ...) firstChild data parentNode childNodes Normalement tu n'as pas besoin de plus que ça.
	00

29/08/2011, 09h37	#7
Dos Membre du Club Vincent Thevenet Ingénieur développement logiciels Inscription : janvier 2003 Messages : 124 Détails du profil Informations personnelles : Nom : Vincent Thevenet Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : janvier 2003 Messages : 124 Points : 48 Points : 48	Merci a tous, Je m'en suis sorti en retravaillant ma page. Mais je note la méthode... __________________ Dos
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email