[DOM] IE, cloneNode, window.open et appendChild

**goutnet** · 19/11/2006, 01h39

Salut,

j'ai un probleme avec un script Javascript que je tentes de développer... L'idée est la suivante, je veux copier une partie de dom de la page visionnée et la mettre dans un popup que j'ouvre. (afin d'imprimer la popup sans pour autant avoir de rechargement de la page).

Donc en gros l'algo est :

Code :

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

1
2
3
 
wnd = window.open( ... )
wnd.document.getElementById("somewhere").appendChild(  document.getElementById("tocopy").cloneNode(true))

Sous firefox, ça marche impec, mais sous IE ... ca pete (oui je sais c'est pas étonnant), est-ce qu'un dieux du JS pourrait me filer un coup de main sur ce coup avant que je plastique redmond ?

(Bon dans les faits, avec cette fonction, je dégage aussi quelques éléments indésirables à l'impression et je change d'autres éléments du DOM ... )

(il me sort "interface non gérérée" sur le premier appendChild) :

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
 
function PrintIt()
{
    var content = document.getElementById( 'includedPage' );
 
    if ( !content )
    {
        alert( "no content!");
        return false;
    }
 
 
    var newContent = content.cloneNode( true );
 
    var printWnd = window.open( '', ''
                              ,  'location=no'
                              + ',status=yes'
                              + ',menubar=no'
                              + ',fullscreen=no'
                              + ',width=950'
                              + ',scrollbars=yes'
                              + ',resizable=0'
                              );
 
    // Create the base document for print
 
    var destDoc = printWnd.document;
    destDoc.write(
                    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
                   +'<?xml version="1.0" encoding="iso-8859-1" ?>'
                   +'<html xml:lang="fr" lang="fr">'
                   +'<head>'
                   +'</head>'
                   +'<body id="body">'
                   +'<img src="images/design/title.png" alt="title"/>'
                   +'<div id="insertPoint"></div>'
                   +'</body>'
                   +'</html>');
 
    // First add css rulez from the initial document
 
    var i = 0;
 
 
    var copyNode = [ 'link', 'styles' ];
    var destNode = destDoc.getElementsByTagName( 'head' )[0];
 
    for ( i = 0; i < copyNode.length ; i ++ )
    {
        var j = 0;
        var copySet = document.getElementsByTagName( copyNode[i] );
 
        for ( j = 0; j < copySet.length ; j ++ )
        {
            var content = copySet[j].cloneNode( true );
            destNode.appendChild( content ); /* Sous IE ca pete ici, "interface non gérée" */
        }
    }
 
 
    // Now rework the content to print to remove links, edit text ... 
 
 
    // delete scripts
 
    var tagRemoval = [ 'script', 'button' ];
    var idx;
 
    for( idx = 0; idx < tagRemoval.length; idx ++ )
    {
        var scripts = newContent.getElementsByTagName( tagRemoval[idx] );
        for( i = scripts.length - 1; i >= 0; i-- ) 
        {
            // Since we delete elements here, we have
            // to make sure that we are not deleting
            // elements that were childs of previously
            // removed elements ...
            if ( scripts[i] && scripts[i].parentNode )
            {
                var parentNode = scripts[i].parentNode;
                parentNode.removeChild( scripts[i] );
            }
        }
    }
 
 
    // freeze anchors links
    var anchors = newContent.getElementsByTagName( "a" );
    for ( i = 0; i < anchors.length; i++ ) 
        anchors[i].removeAttribute( 'href' );
 
    // change the input/select/textareas into div
 
    var inputs = newContent.getElementsByTagName( 'input' );
    for ( i = inputs.length - 1; i >= 0 ; i -- )
    {
        var parentNode = inputs[i].parentNode;
        var type = inputs[i].getAttribute("type");
 
        switch( type )
        {
            case 'password' :
            case 'text':
                var divnode = destDoc.createElement( 'span' );
                divnode.innerHTML = ('' != inputs[i].value)? inputs[i].value : '&nbsp;';
                parentNode.replaceChild( divnode, inputs[i] );
                break;
            case 'checkbox' :
            case 'radio' :
                if ( !inputs[i].checked )
                {
                    if( inputs[i].nextSibling )
                        parentNode.removeChild(inputs[i].nextSibling);
                }
                parentNode.removeChild(inputs[i]);
                break;
        }
 
    }
 
    // Replace selects by their text content
    var selects = newContent.getElementsByTagName( 'select' );
    for (i = selects.length - 1; i >= 0; i-- )
    {
        var parentNode = selects[i].parentNode;
        var divnode = destDoc.createElement( 'span' );
 
        var options = selects[i].getElementsByTagName( 'option' );
        var j;
 
        var text =  "&nbsp;";
 
        for ( j = 0; j < options.length; j++ )
        {
            if ( options[j].value == selects[i].value )
            {
                text = options[j].text;
                break;
            }
        }
 
        divnode.innerHTML = text;
        parentNode.replaceChild( divnode, selects[i] );
    }
 
    // finally apply basic textarea substitutions
 
    var textareas = newContent.getElementsByTagName( 'textarea' );
    for (i = textareas.length - 1; i >= 0; i --)
    {
        var parentNode = textareas[i].parentNode;
        var divnode = destDoc.createElement( 'span' );
 
        divnode.innerHTML = (textareas[i].value) ? textareas[i].value : '&nbsp;';
        divnode.className = "textarea";
        parentNode.replaceChild( divnode, textareas[i]);
    }
 
    // Finally adds the result 
    destDoc.getElementById("insertPoint").appendChild( newContent );
 
    // Removes OKCancelWidgets and control tabs ... This must be done 
    // on the document, since this is the only one having the getElementById
    // function ...
 
    var widget;
    var widgetRemoval = [ "okcancelwidget", "pricewidget", "imagewidget", "modificationwidget" ];
 
    for( i = 0; i < widgetRemoval.length; i ++)
    {
	widget = destDoc.getElementById( widgetRemoval[i] );
	if (widget)
        {
            widget.parentNode.removeChild( widget );
        }
    }
 
    printWnd.focus();
    printWnd.print();
}

**goutnet** · 19/11/2006, 21h35

PS: C'était évident, mais bon ... cette fonction marche sans aucain soucis sous Firefox ...

**half_oopss** · 03/04/2008, 12h29

Ton erreur viens du faite que IE ne peut pas ajouter au opener un element de la popup, je viens d'avoir le problème.

Créé ton element dans l'opener et ajoute le alors.

**SpaceFrog** · 03/04/2008, 13h40

sur le site www.ouestisol.fr sur la page offre d'emploi, quand tu cliques sur le bouton imprimer, c'est ce que fait le script ... il prends les nodes de la page concerant l'offe d'emploi en question et construit la page de prévisualisation d'impression ...
Fonctionne sous IE et FFX ..

[DOM] IE, cloneNode, window.open et appendChild

JavaScript

Vue hybride

Discussions similaires

Partager

Partager