webkitmutationobserver가 Safari에서 작동하지 않습니까?

Question

요소의 표시 상태를 모니터링해야합니다. 다음 코드를 사용하고 있습니다.

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

그러나 Safari에서는 작동하지 않습니다. 사파리 (V 5.1.7),이 메시지 에 오류를 제공하면서 또한

은, 크롬에서 직접 실행 창 개발자 도구에 입력 "WebKitMutationObserver는"출력을

function WebKitMutationObserver() { [native code] } 

을 제공합니다 "찾을 수 없습니다 변수 : WebKitMutationObserver "

Safari가 WebkitMutationObserver를 지원하지 않을 수 있습니까? 그렇다면이 용도로 사용할 수있는 대안이 있습니까?

Answer 1

최신 Safari (6.0)에는 WebKitMutationObserver이 포함됩니다. 이전 Safari의 경우 setAttribute 또는 removeAttribute을 사용하여 속성을 변경하면 DOMAttrModified 이벤트 가짜 코드가 생성되었습니다. 브라우저 자체가 내부적으로 속성을 변경하는 경우에는 작동하지 않습니다.

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