2009-11-28 9 views
5

que je cherchais arround le web, et je suis assez sûr que je connais déjà la réponse (« non »), mais je voudrais vérifier:support IE pour DOM importNode

pris en charge par IE importNode() encore? Existe-t-il une meilleure alternative que de marcher sur le DOM et de créer des nœuds? (J'ai vu the clasic article by Anthony Holdener mais c'est plus d'un an maintenant, et j'espère que IE a évolué, ou quelqu'un a un autre travail)

Merci.

+0

Voici une [question relative à une mise en œuvre] (http://stackoverflow.com/a/6075604/405017). – Phrogz

Répondre

4

Je n'ai pas entendu cela a encore changé, et dans un recent post par John Resig, il déclare:

Internet Explorer ne supporte pas importNode ou adoptNode

Voir aussi ce A Liste Apart article sur cross-browser importnode() car il comprend une solution de travail spécifique pour Internet Explorer.

devis pour la postérité,

La solution à tous mes problèmes était de ne pas utiliser une méthode DOM après tout, et d'utiliser plutôt ma propre mise en œuvre. Ici, dans toute sa gloire, est ma solution finale au problème importNode() codé de manière compatible multi-navigateur: (enveloppements ligne marquée »-Ed.)

if (!document.ELEMENT_NODE) { 
    document.ELEMENT_NODE = 1; 
    document.ATTRIBUTE_NODE = 2; 
    document.TEXT_NODE = 3; 
    document.CDATA_SECTION_NODE = 4; 
    document.ENTITY_REFERENCE_NODE = 5; 
    document.ENTITY_NODE = 6; 
    document.PROCESSING_INSTRUCTION_NODE = 7; 
    document.COMMENT_NODE = 8; 
    document.DOCUMENT_NODE = 9; 
    document.DOCUMENT_TYPE_NODE = 10; 
    document.DOCUMENT_FRAGMENT_NODE = 11; 
    document.NOTATION_NODE = 12; 
} 

document._importNode = function(node, allChildren) { 
    switch (node.nodeType) { 
    case document.ELEMENT_NODE: 
     var newNode = document.createElement(node » 
.nodeName); 
     /* does the node have any attributes to add? */ 
     if (node.attributes && node.attributes » 
.length > 0) 
     for (var i = 0; il = node.attributes.length;i < il) 
      newNode.setAttribute(node.attributes[i].nodeName, 
      node.getAttribute(node.attributes[i++].nodeName)); 
     /* are we going after children too, and does the node have any? */ 
     if (allChildren && node.childNodes && node.childNodes.length > 0) 
     for (var i = 0; il = node.childNodes.length; i < il) 
      newNode.appendChild(document._importNode(node.childNodes[i++], allChildren)); 
     return newNode; 
     break; 
    case document.TEXT_NODE: 
    case document.CDATA_SECTION_NODE: 
    case document.COMMENT_NODE: 
     return document.createTextNode(node.nodeValue); 
     break; 
    } 
}; 

Ici, il est en cours d'utilisation:

var newNode = null, importedNode = null; 

newNode = xhrResponse.responseXML.getElementsByTagName('title')[0].childNodes[0]; 
if (newNode.nodeType != document.ELEMENT_NODE) 
    newNode = newNode.nextSibling; 
if (newNode) { 
    importedNode = document._importNode(newNode, true); 
    document.getElementById('divTitleContainer').appendChild(importedNode); 
    if (!document.importNode) 
    document.getElementById('divTitleContainer').innerHTML = document.getElementById('divTitleContainer').innerHTML; 
} 
+1

C'est une bonne approche générale, mais vous aurez besoin de 'document.createComment' en réponse à un' COMMENT_NODE'; le transformer en un nœud de texte n'est probablement pas une bonne idée.Il y a aussi beaucoup de problèmes avec l'utilisation de 'getAttribute' /' setAttribute' sur les éléments HTML dans IE, malheureusement; Si vous clonez des formulaires, 'name' peut être un problème, et les attributs' onX' et les 'style's ne fonctionneront pas de manière utile (il vaut mieux les éviter). De même, tous les éléments '

-1

Pour une solution plus léger (à condition que vous ne me dérange pas d'ajouter la dépendance), vous pouvez toujours utiliser jQuery:

$(dom_to_import_into).find('element-to-import-into').append($(dom_to_import).clone()); 

Cela ajoutera dom_to_import à la fin de 'element-to-import-into'.

+0

Bon conseil! Merci –

+0

PEUT NE PAS TRAVAILLER dans IE. Cela dépend de ce que vous essayez de faire. Je soupçonne que l'affiche originale utilise importNode parce qu'il copie à partir d'un document externe (par exemple iframe ou window.open). En tant que tel, l'utilisation de append de jQuery échouera toujours sur IE. HierarchyRequestError. – joedotnot

5

Il existe une fonction document.importNode() dans l'API DOM d'Internet Explorer 9. Cependant, IE9 renvoie une erreur de script quand il est appelé

SCRIPT16386: cette interface prise en charge

Il est également nécessaire de définir l'espace de noms noeud source (par exemple, lorsque l'on veut importer SVG - In IE9, Imported nodes do not seem to be recognized as SVG Elements)

suggéré this solution de contournement utile. Cependant, lorsque nous importons un élément qui a un espace de nommage spécial (déclaré dans l'attribut xmlns, par exemple <svg xmlns="http://www.w3.org/2000/svg" …>…</svg>), il y aura une erreur dans clone.setAttributeNS(a.namespaceURI,a.nodeName,a.nodeValue) parce que namespaceURI pour l'attribut xmlns est null.

Il y a solution qui fonctionne pour moi:

var newNode; 
try { 
    newNode = document.importNode(sourceDocumentElement, true); 
} 
catch(e) { 
    newNode = importNode(sourceDocumentElement, true); 
} 

function importNode(node, allChildren) { 
    switch (node.nodeType) { 
    case document.ELEMENT_NODE: 
     var newNode = document.createElementNS(node.namespaceURI, node.nodeName); 
     if(node.attributes && node.attributes.length > 0) 
     for(var i = 0, il = node.attributes.length; i < il; i++) 
      newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i].nodeName)); 
     if(allChildren && node.childNodes && node.childNodes.length > 0) 
     for(var i = 0, il = node.childNodes.length; i < il; i++) 
      newNode.appendChild(importNode(node.childNodes[i], allChildren)); 
     return newNode; 
     break; 
    case document.TEXT_NODE: 
    case document.CDATA_SECTION_NODE: 
    case document.COMMENT_NODE: 
     return document.createTextNode(node.nodeValue); 
     break; 
    } 
} 
+0

Cela fonctionne très bien pour moi, mais j'ai un problème où les éléments apparaissent comme des images brisées (dans IE9). Une idée de comment cela a-t-il pu arriver? J'ai vérifié que les URL de l'image sont valides, donc ce n'est certainement pas le problème. Merci! – lakenen

+0

Dans le cas où quelqu'un est intéressé, j'ai [résolu le problème] (http://stackoverflow.com/questions/14593520/ie9-importing-inline-svg-image-elements-broken). – lakenen