Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

Can’t find variable: MutationObserver in Safari

I recently discovered MutationObserver and was excited to find the observer pattern baked into the dom. The MutationObserver allows you to watch a dom node for changes and assign a callback function.

Everything was working great in chrome, so why would i even need to test in Safari? Turns out there is a bug in the safari implementation of MutationObserver. Though it’s not entirely broken.

ReferenceError: Can’t find variable: MutationObserver

The problem is the MutationObserver is not available to the page scope in safari. However, you can locate it from, and store a copy to, an http module object such as Date.

Populate the MutationObserver object:
$(document).ready( function() {
bad: var MutationObserver = window.WebKitMutationObserver || window.MutationObserver || window.MozMutationObserver || null;
good: Date.MutationObserver = window.WebKitMutationObserver || window.MutationObserver || window.MozMutationObserver || null;
});

Create observer var to hold instanct of MutationObserver:
bad: var observer = new MutationObserver($.callback);
good: var observer = new Date.MutationObserver($.callback);

Sample callback:
$.callback = function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
}

Now create an object indicating which properties you want to observe and assign the observer a dom node and this new object:
var observables = { childList: true};
observer.observe( popupTarget, observables );

The good news is that this issue is resolved in safari 6.0.4.

You can find more information on MutationObserver here and here.

more posts at www.toddrothe.com/blog

 

No Responses to “Can’t find variable: MutationObserver in Safari” (post new)

 

Leave a Reply

You must be logged in to post a comment.