Gibt es eine Alternative zu DOMAttrModified, die in Webkit funktioniert?

Muss ich nutzen, diese DOM-event. IE hat onpropertychange, die tut, was ich brauche, es auch zu tun. Webkit scheint nicht, diese Veranstaltung zu unterstützen, jedoch. Gibt es eine alternative, die ich verwenden könnte?

InformationsquelleAutor der Frage blockhead | 2009-12-10

  1. 24

    Obwohl Chrome nicht Versand DOMAttrModified Veranstaltungen, die mehr leicht mutation Beobachter unterstützt seit 2011 und diese Arbeit für Attribut-änderungen, auch.

    Hier ist ein Beispiel für die Dokument-Körper:

    var element = document.body, bubbles = false;

var observer = new WebKitMutationObserver(function (mutations) {
  mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: bubbles });

function attrModified(mutation) {
  var name = mutation.attributeName,
    newValue = mutation.target.getAttribute(name),
    oldValue = mutation.oldValue;

  console.log(name, newValue, oldValue);
}

    Für ein einfaches Attribut ändern, die console.log Anweisung drucken würde:

    <body color="black">
<script type="text/html">
document.body.setAttribute("color", "red");
</script>
</body>

    Konsole:

    > color red black

    InformationsquelleAutor der Antwort daluege

  2. 13

    Wenn Sie mit dem zufrieden sind, lediglich die Erkennung von anrufen auf setAttribute() (im Gegensatz zum monitoring werden alle Attribut-änderungen), dann könnte man die über-Fahrt, die Methode auf alle Elemente mit: 

    Element.prototype._setAttribute = Element.prototype.setAttribute
Element.prototype.setAttribute = function(name, val) { 
 var e = document.createEvent("MutationEvents"); 
 var prev = this.getAttribute(name); 
 this._setAttribute(name, val);
 e.initMutationEvent("DOMAttrModified", true, true, null, prev, val, name, 2);
 this.dispatchEvent(e);
}

    InformationsquelleAutor der Antwort Sean Hogan

  3. 3

    Ich hatte die gleiche Frage und dachte, das zu ändern setAttributeso sehen was Sean getan hathabe ich kopiert. Hat Super geklappt, außer, dass es feuern, wenn ein Attribut mehrfach wurde auf den gleichen Wert gesetzt, so dass ich Hinzugefügt eine überprüfung, um meine Kopie zu überspringen auslösen des Ereignisses, wenn der Wert nicht geändert wird. Ich habe auch val = String(val)basierend auf der Begründung, dass setAttribute wird zwingen, die zahlen zu Zeichenfolgen, so ist der Vergleich sollte erwarten, dass.

    Meine modifizierte version: 

    var emulateDOMAttrModified = {

  isSupportedNatively: function () {
    var supported = false;
    function handler() {
      supported = true;
    }
    document.addEventListener('DOMAttrModified', handler);
    var attr = 'emulateDOMAttrModifiedTEST';
    document.body.setAttribute(attr, 'foo'); //aka $('body').attr(attr, 'foo');
    document.removeEventListener('DOMAttrModified', handler);
    document.body.removeAttribute(attr);
    return supported;
  },

  install: function () {
    if (!this.isSupportedNatively() &&
      !Element.prototype._setAttribute_before_emulateDOMAttrModified) {
      Element.prototype._setAttribute_before_emulateDOMAttrModified = Element.prototype.setAttribute
      Element.prototype.setAttribute = function(name, val) {
        var prev = this.getAttribute(name);
        val = String(val); /* since attributes do type coercion to strings,
           do type coercion here too; in particular, D3 animations set x and y to a number. */
        if (prev !== val) {
          this._setAttribute_before_emulateDOMAttrModified(name, val);
          var e = document.createEvent('MutationEvents');
          e.initMutationEvent('DOMAttrModified', true, true, null, prev, val, name, 2);
          this.dispatchEvent(e);
        }
      };
    }
  }

};

//Install this when loaded.  No other file needs to reference this; it will just make Chrome and Safari
//support the standard same as Firefox does.
emulateDOMAttrModified.install();

    InformationsquelleAutor der Antwort Bob Kanefsky

  4. 0

    Entnehmen Sie bitte der code:
    https://github.com/meetselva/attrchange/blob/master/attrchange.js
    'DOMAttrModified' + ('propertychange' für den IE) verwendet werden, da wie in Ihrem Fall. Wenn es nicht für Sie geeignet sein, die "unschöne" Lösung, die diesem Anspruch gerecht werden sollte setInterval(function(){}, delay)
    Ansonsten siehe Sean Hogan post oben.

    InformationsquelleAutor der Antwort user1700099

  5. 0

    Die Lösung von @Filip ist in der Nähe (und möglicherweise gearbeitet haben, zu der Zeit), aber jetzt zu verlangen, die Lieferung der alt Attribut-Wert.

    So, die Sie ändern wollen :

    observer.observe(element, { attributes: true, subtree: bubbles });

    :

    observer.observe(element, { attributes: true, attributeOldvalue:true, subtree: bubbles });

    Andernfalls werden Sie nicht sehen, die oldValues (erhalten Sie null statt.) Getestet wurde dies in Chrome 34.0.1847.131 (Offizieller Build 265687) m.

    InformationsquelleAutor der Antwort user1055892

Schreibe einen Kommentar