Come faccio OuterHTML in firefox?

Parte del mio codice mi dà il nome di OuterHTML

"
  • Name "
  • quindi posso fare cose involontarie analizzandolo.

    Non c’è però una proprietà OuterHTML in javascript su firefox e non riesco a trovare un modo alternativo per ottenere questa stringa. Idee?

    Ecco la funzione che usiamo in pure.js :

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

    Per usarlo nel modo DOM:

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

    E funziona cross browser

    EDIT: ATTENZIONE! C’è un problema con XMLSerializer, genera una stringa XML (XHTML).
    Il che significa che puoi finire con tag come

    invece di


    Ad alcuni browser non piace. Ho avuto qualche problema con Firefox 3.5 di recente.

    Quindi per la nostra pure.js lib siamo tornati al vecchio e sicuro modo:

     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); } 

    L’approccio corretto (per i browser non IE) è:

     var sOuterHTML = new XMLSerializer().serializeToString(oElement); 

    Se sei disposto ad usare jQuery, è relativamente semplice:

     $('
    ').append( $(ElementSelector).clone() ).html();

    Ciò otterrà l’HTML esterno di più elementi se sono selezionati più elementi.

    outerHTML ora è supportato da Firefox:

    Da Firefox 11 per gli sviluppatori

    Firefox 11 è stato rilasciato il 13 marzo 2012. In questo articolo vengono fornite informazioni sulle nuove funzionalità e sui bug principali risolti in questa versione, nonché collegamenti a documentazione più dettagliata per gli sviluppatori Web e gli sviluppatori aggiuntivi.

    • La proprietà element.outerHTML ora è supportata su elementi HTML.

    Per il motivo che W3C non include la proprietà outerHTML, è sufficiente aggiungere:

     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 + ""; }); 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()); }); } 

    Prova questo: 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; } ); } } } 

    Che ne dici di qualcosa di semplice come questo (non completamente testato):

     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 ""; } 

    Provare:

     (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); 

    per diyism

    Se tutto ciò che si desidera è l’attributo onclick, quindi provare quanto segue: Si presume che non è stato impostato l’evento utilizzando attachEvent o addEventListener.

     elm.getAttribute("onclick"); 

    Se vuoi creare una stringa outerHTML (prometti solo di non smontarla dopo averla fatta):

     function outerHTML(elm){ var ret = "<"+elm.tagName; for(var i=0; i"; return ret; } 

    Questa funzione dovrebbe fare il trucco nella maggior parte dei casi, ma non prende in considerazione gli spazi dei nomi.

    Capito!

     child.getAttributeNode("OnClick").nodeValue; 

    getAttribute non ha funzionato, ma getAttributeNode ha funzionato alla grande; D

    So che questo è un thread vecchio, ma se qualcuno lo trova con Google (come ho fatto io) – ho provato tutte queste soluzioni e nessuno di loro ha funzionato immediatamente, dal momento che nessuno ha gestito sia le proprietà di acquisizione che quelle di externalHTML. Ho trovato questo: che ha funzionato per me:

     // 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); } }()); 

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