8

I am attempting to fix and issue with my code. I was originally using DOMNodeRemoved and DOMNodeInserted for keeping an eye on an element within a page I am working on. They worked well but did not function in IE. So I started trying to work with a MutationObserver.

Here is my Code it's called on onPageInit(the callback writes to the console but I disabled it since IE no longer supports console):

var callback = function(allmutations){
    allmutations.map( function(mr){
        var mt = 'Mutation type: ' + mr.type;  // log the type of mutation
        mt += 'Mutation target: ' + mr.target; // log the node affected.
        //console.log( mt );
    })
}
mo = new MutationObserver(callback),
options = {
    // required, and observes additions or deletion of child nodes.
    'childList': true, 
    // observes the addition or deletion of "grandchild" nodes.
    'subtree': true
}
alert('its alive');
mo.observe(document.body, options);

It works fine in chrome, however for some reason falls flat in IE. I get a message box during load of the page that says :

An unexpected error occurred in a script running on this page.
onPageInit(pageInit)
scriptname

JS_EXCEPTION
TypeError 'MutationObserver' is undefined

Am I doing something wrong? Additional info: Page is a netsuite page, running jQuery 1.7.2 (if it matters)

5
  • 1
    Are you sure the browser is running in IE11 standards mode?
    – Kevin B
    Commented Dec 4, 2013 at 18:48
  • "since IE no longer supports console" since when? (press F12 and console.log will work)
    – Kevin B
    Commented Dec 4, 2013 at 18:51
  • The page runs automatically in IE-9 compatibility mode since Netsuite sets that, which also is apparently why I could never use console.log() either... Commented Dec 4, 2013 at 19:00
  • 1
    That would explain why the method added in IE11 isn't available to you.
    – Kevin B
    Commented Dec 4, 2013 at 19:00
  • indeed throw it in an answer and ill mark it as the solution, thanks for informing me on something that has caused me alot of frustration. Commented Dec 4, 2013 at 19:01

2 Answers 2

20

If you need to detect DOM insertions in IE10+ (and other browsers that don't yet support MutationObserver) You can use a trick based on listening to animationstart event for CSS animations that animate a property that doesn't affect the way your nodes look.

The technique was discovered by Daniel Buchner, you can see it described it this post by David Walsh

The code required to make it work would be something like this:

@keyframes animationName{ 
    from { outline: 1px solid transparent } 
    to { outline: 0px solid transparent } 
}
* { 
    animation-duration: 0.001s; 
    animation-name: animationName;
}

and

document.addEventListener('animationstart', insertionHandler, false);

The setup required for this trick to work cross-browser is quite complicated with all the prefixes and event listener names. The handler will be called for every new node and the choice of the property to animate is hard.

That's why I wrapped it in a library to make it easy to use: https://github.com/naugtur/insertionQuery

Here's a brief usage example:

insertionQ('selector').every(function(element){
    //callback on every new element
});
9

That method was added in IE11, therefore it won't be available if the browser is running in compatibility mode for anything other than IE11.

http://msdn.microsoft.com/en-us/library/ie/dn265034(v=vs.85).aspx

1
  • 2
    Just as a comment, Netsuite automatically runs in ie-9 compatibility mode which was what was causing the issue. Commented Dec 4, 2013 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.