web-dev-qa-db-fra.com

Comment puis-je faire OuterHTML dans Firefox?

Une partie de mon code, je reçois la propriété OuterHTML

"<LI onclick="TabClicked(this, 'SearchName', 'TabGroup1');">Name "

afin que je puisse faire des choses impliquant de l'analyser.

Il n'y a pas de propriété OuterHTML en javascript sur firefox et je ne trouve pas d'autre moyen d'obtenir cette chaîne. Des idées?

javascriptdomcross-browser
37
NibblyPig

Deviner!

child.getAttributeNode("OnClick").nodeValue;

getAttribute n'a pas fonctionné, mais getAttributeNode a très bien fonctionné; D

0
NibblyPig

Voici la fonction que nous utilisons dans pure.js :

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

Pour l'utiliser de la manière DOM:

outerHTML(document.getElementById('theNode'));

Et cela fonctionne sur plusieurs navigateurs

EDIT: ATTENTION! Il y a un problème avec XMLSerializer, il génère une chaîne XML (XHTML).
Ce qui signifie que vous pouvez vous retrouver avec des balises comme <div class="team" /> au lieu de
<div class="team"></div>
Certains navigateurs ne l'aiment pas. J'ai eu quelques problèmes avec Firefox 3.5 récemment.

Donc pour notre pure.js lib nous sommes revenus à l'ancienne et sûre façon:

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
  }
68
Mic

L'approche appropriée (pour les navigateurs non IE) est la suivante:

var sOuterHTML = new XMLSerializer().serializeToString(oElement);
19
Sergey Ilinsky

Si vous êtes prêt à utiliser jQuery, c'est relativement simple:

$('<div>').append( $(ElementSelector).clone() ).html();

Cela obtiendra le HTML externe de plusieurs éléments si plusieurs éléments sont sélectionnés.

12
Peter Ajtai

externeHTML est maintenant pris en charge par Firefox:

De Firefox 11 pour les développeurs

Firefox 11 a été livré le 13 mars 2012. Cet article fournit des informations sur les nouvelles fonctionnalités et les principaux bogues corrigés dans cette version, ainsi que des liens vers une documentation plus détaillée pour les développeurs Web et les développeurs de modules complémentaires.

  • La propriété element.outerHTML est désormais prise en charge sur les éléments HTML.
7
Rich Bennema

Essayez ceci: http://snipplr.com/view/5460/outerhtml-in-firefox/ :

if (document.body.__defineGetter__) { 
   if (HTMLElement) {
      var element = HTMLElement.prototype;
      if (element.__defineGetter__) {
         element.__defineGetter__("outerHTML",
           function () {
              var parent = this.parentNode;
              var el = document.createElement(parent.tagName);
              el.appendChild(this);
              var shtml = el.innerHTML;
              parent.appendChild(this);
              return shtml;
           }
         );
      }
   }
}
2
Mark Bell

Pour la raison que W3C n'inclut pas la propriété externalHTML, vous avez juste besoin d'ajouter ce qui suit:

if (typeof (HTMLElement) != "undefined" && !window.opera)  
{  
    HTMLElement.prototype._____defineGetter_____("outerHTML", function()  
    {  
        var a = this.attributes, str = "<" + this.tagName, i = 0; for (; i < a.length; i++)  
            if (a[i].specified)  
            str += " " + a[i].name + '="' + a[i].value + '"';  
        if (!this.canHaveChildren)  
            return str + " />";  
        return str + ">" + this.innerHTML + "</" + this.tagName + ">";  
    });  
    HTMLElement.prototype._____defineSetter_____("outerHTML", function(s)  
    {  
        var r = this.ownerDocument.createRange();  
        r.setStartBefore(this);  
        var df = r.createContextualFragment(s);  
        this.parentNode.replaceChild(df, this);  
        return s;  
    });  
    HTMLElement.prototype._____defineGetter_____("canHaveChildren", function()  
    {  
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());   
    });  
}
2
sesame

Essayer:

(function(ele, html)
{if (typeof(ele.outerHTML)=='undefined')
    {var r=ele.ownerDocument.createRange();
     r.setStartBefore(ele);
     ele.parentNode.replaceChild(r.createContextualFragment(html), ele);
    }
 else
     {ele.outerHTML=html;
     }
})(aEle, aHtml);

pour le diyisme

1
diyism

Que diriez-vous de quelque chose de simple comme celui-ci (non entièrement testé):

function outerHTML(node) {
    var el;
    if (node.outerHTML) {
        return node.outerHTML;
    } else if (node.parentNode && node.parentNode.nodeType == 1) {
        var el = document.createElement(node.parentNode.nodeName);
        el.appendChild( node.cloneNode(true) );
        return el.innerHTML;
    }
    return "";
}
1
Tim Down

Si tout ce que vous voulez est l'attribut onclick, essayez ce qui suit: Cela suppose que vous n'avez pas défini l'événement à l'aide de attachEvent ou addEventListener.

Elm.getAttribute("onclick");

Si vous souhaitez créer une chaîne HTML externe (promettez simplement de ne pas la démonter après l'avoir créée):

function outerHTML(Elm){
  var ret = "<"+Elm.tagName;
  for(var i=0; i<Elm.attributes.length; i++){
    var attr = Elm.attributes[i];
    ret += " "+attr.name+"=\""+attr.nodeValue.replace(/"/, "\"")+"\"";
  }
  ret += ">";
  ret += Elm.innerHTML+"</"+Elm.tagName+">";
  return ret;
}

Cette fonction devrait faire l'affaire dans la plupart des cas, mais elle ne prend pas en compte les espaces de noms.

0
Marius

Je sais que c'est un vieux fil de discussion, mais si quelqu'un le trouve avec Google (comme je l'ai fait) - j'ai essayé toutes ces solutions et aucune d'entre elles n'a fonctionné prêt à l'emploi, car aucune ne gérait à la fois les propriétés d'obtention et de définition de externalHTML. J'ai trouvé ceci: qui a fonctionné pour moi:

// Implement the outerHTML property for browsers that don't support it.
// Assumes that the browser does support innerHTML, has an extensible 
// Element.prototype, and allows getters and setters to be defined.
(function() {
// If we already have outerHTML return without doing anything
if (document.createElement("div").outerHTML) return;

// Return the outer HTML of the element referred to by this
function outerHTMLGetter() {
    var container = document.createElement("div"); // Dummy element
    container.appendChild(this.cloneNode(true));   // Copy this to dummy
    return container.innerHTML;                    // Return dummy content
}

// Set the outer HTML of the this element to the specified value
function outerHTMLSetter(value) {
    // Create a dummy element and set its content to the specified value
    var container = document.createElement("div");
    container.innerHTML = value;
    // Move each of the nodes from the dummy into the document
    while(container.firstChild)  // Loop until container has no more kids
        this.parentNode.insertBefore(container.firstChild, this);
    // And remove the node that has been replaced
    this.parentNode.removeChild(this);
}

// Now use these two functions as getters and setters for the 
// outerHTML property of all Element objects. Use ES5 Object.defineProperty
// if it exists and otherwise fall back on __defineGetter__ and Setter__.
if (Object.defineProperty) {
    Object.defineProperty(Element.prototype, "outerHTML", {
                              get: outerHTMLGetter,
                              set: outerHTMLSetter,
                              enumerable: false, configurable: true
                          });
}
else {
    Element.prototype.__defineGetter__("outerHTML", outerHTMLGetter);
    Element.prototype.__defineSetter__("outerHTML", outerHTMLSetter);
}
}());

Félicitations: https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-15/implementing-the-outerhtml

0
JSP64