3

要素の表示状態を監視する必要があります。次のコードを使用しています

if WebKitMutationObserver?
    observer = new WebKitMutationObserver observerFunc
    observer.observe el, {attributes:true}
  else
    el.addEventListener "DOMAttrModified",(event)->
      wrapper.style.display = el.style.display
      return

ただし、これは Safari では機能しません。

また、Chrome の開発者ツールの即時ウィンドウに「WebKitMutationObserver」と入力すると、出力が得られます

function WebKitMutationObserver() { [native code] }

Safari (v 5.1.7) では、「変数が見つかりません: WebKitMutationObserver」というメッセージでエラーが発生します。

Safari が WebkitMutationObserver をサポートしていないということでしょうか? もしそうなら、これに使用できる代替手段はありますか?

4

1 に答える 1

0

最新の Safari (6.0) には含まれていますWebKitMutationObserver。古い Safari の場合、属性を使用または変更するDOMAttrModifiedときにイベントを偽装するコードを次に示します。ブラウザ自体が属性を内部的に変更する場合、これは機能しないことに注意してください。setAttributeremoveAttribute

  var win = window;
  var doc = win.document;
  var attrModifiedWorks = false;
  var listener = function () { attrModifiedWorks = true; };
  doc.documentElement.addEventListener("DOMAttrModified", listener, false);
  doc.documentElement.setAttribute("___TEST___", true);
  doc.documentElement.removeAttribute("___TEST___", true);
  doc.documentElement.removeEventListener("DOMAttrModified", listener, false);
  if (!attrModifiedWorks)
  {
    This.DOMAttrModifiedUnsupported = true;

    win.HTMLElement.prototype.__setAttribute = win.HTMLElement.prototype.setAttribute;
    win.HTMLElement.prototype.setAttribute = function fixDOMAttrModifiedSetAttr (attrName, newVal)
    {
      var prevVal = this.getAttribute(attrName);
      this.__setAttribute(attrName, newVal);
      newVal = this.getAttribute(attrName);
      if (newVal != prevVal)
      {
        var evt = doc.createEvent("MutationEvent");
        evt.initMutationEvent
          ( "DOMAttrModified"
          , true
          , false
          , this
          , prevVal || ""
          , newVal || ""
          , attrName
          , (prevVal == null) ? win.MutationEvent.ADDITION : win.MutationEvent.MODIFICATION
          );
        this.dispatchEvent(evt);
      }
    }

    win.HTMLElement.prototype.__removeAttribute = win.HTMLElement.prototype.removeAttribute;
    win.HTMLElement.prototype.removeAttribute = function fixDOMAttrModifiedRemoveAttr (attrName)
    {
      var prevVal = this.getAttribute(attrName);
      this.__removeAttribute(attrName);
      var evt = doc.createEvent("MutationEvent");
      evt.initMutationEvent("DOMAttrModified", true, false, this, prevVal, "", attrName, win.MutationEvent.REMOVAL);
      this.dispatchEvent(evt);
    }
  }
}
于 2012-08-03T08:43:07.353 に答える