Question

I am facing a weird behavior and I need some help..

I encounter a situation when I try to recognize whether the content of the page was modified. I do it using

gBrowser.tabContainer.addEventListener("DOMSubtreeModified", function (e) { this.foo(e); }, false);

I also tried listening to document.DOMSubtreeModified and window.DOMSubtreeModified.

However, I sometimes get a situation in which the default\selected document is something that is irrelevant to me – perhaps some IFrame or a commercial built in or whatever, and bottom line my content is modified but when staring at the browser DOMSubtreeModified doesn’t fire since it listens to a document\whatever that was indeed not modified…

Can you please help my understnad where’s my problem? I need to create some event that recognizes any content modification (something like DOMSubtreeModified) that fires for every document, so that I could identify my relevant content and process it?

Thanks a lot,

Nili

Answer 1

You could explicitly listen for all DOM modification by adding a listener on the document object for each <iframe> element within the element you’re interested in:

function listenForDomModified(node, listener) {
    node.addEventListener("DOMSubtreeModified", listener, false);
    var iframes = node.getElementsByTagName("iframe");
    for (var i = 0, len = iframes.length, doc; i < len; ++i) {
        // Catch and ignore errors caused by iframes from other domains
        try {
            doc = iframes[i].contentDocument || iframes[i].contentWindow.document;
            doc.addEventListener("DOMSubtreeModified", listener, false);
        } catch (ex) {}
    }
}

listenForDomModified(gBrowser.tabContainer);

Note that the DOMSubtreeModified event doesn’t fire at all in Opera, so your code won’t work in that browser.