Firefox : DOM Mutation Events for disconnected nodes?

Question

I have a few questions (I am interested in answers related to Firefox, but answers in context of other browser might be acceptable too).

1. Do DOM Mutation events get fired for nodes disconnected from the main document, i.e. are disconnected? As per information present in one of the Mozilla bugs, the answer seems yes. Can someone give me some examples?

2. What is the quickest way of finding if a node is disconnected or not? The naive approach is walk (using node.parentNode) all the way up till we reach null or the document. Anything faster?

3. Does Firefox support Webkit's 'magic iframe' feature? If not, what will happen if that code ran in Firefox?

4. Related to #3, is it possible for a iframe to continue loading while disconnected from the document? I.e. it was connected to a main doc, loading started, then moved to another document (using adoptNode()), but never added to a parent node in the new doc. Will iframe continue loading?

Thanks in advance, Sunil

Answer 1

1. The DOMNodeRemoved event is fired when an a node (element, text node, comment, ..) is removed from the document/element to which the event is bound.

   document.addEventListener('DOMNodeRemoved', function(event) {
       console.log('Removed node: ' + event.target.nodeName);
   });
   

2. Benchmarking two possibilities:

   • A plain loop:

     function isDisconnected(node) {
         var rootElement = document.documentElement;
         while (node) {
             if (node === rootElement)
                 return false;
             node = node.parentNode;
         }
         return true;
     }
     

   • document.contains( node ):

     function isDisconnected(node) {
         return !document.contains(node);
     }
     

   
   Result: http://jsperf.com/dom-contains-vs-parentnode
   The document.contains() method significantly (47x) faster than the loop method (whether the nodes are disconnected or not, the document.contains method always outperforms the loop).

3. The Magic iframe feature does not work in Firefox, as tested using this fiddle: http://jsfiddle.net/GRFsd/
   For those who don't know about this feature: In Chrome, an iframe can be moved from one document to the other, without unloading the frame. This is called the magic iframe feature.

The provided jsfiddle moves an iframe whose src attribute is set to "data:text/html,<script>alert(/Test/);<\/script>". When this URL is loaded, an alert shows up. Two alerts showing up means that the Magic iframe feature is not supported. One alert showing up means that the feature is supported. Zero alerts showing up means that your JavaScript is disabled, or that your browser doesn't support data-URIs.