6

I'm writing a Mozilla Firefox Extension (Javascript without the BS of having to identify if it's IE or Firefox), where I find myself stuck in the following situation. On a page load, I add event listeners like so: extension.addEventListener("DOMContentLoaded", extension.onPageLoad, true);

That would execute m "onPageLoad()" method as soon as the DOM is loaded, meaning all data is received. And that works, but I need to find a way to add a listener for when the DOM changes. The extension should read all data in the appbrowser-window, even if that's update via AJAX calls (ie: twitter, facebook).

I've looked into the DOMSubtreeModified event, but that doesn't seem to work when content is dynamically added after the initial DOMContentLoaded event has fired.

Has anyone ever overcome this problem?

My alternative is to keep firing the same function with a timeout() of say 2 seconds, to reread the DOM and parse it, but I prefer to only do that if it actually changed.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Mojah
  • 1,373
  • 2
  • 12
  • 16

3 Answers3

8

DOMSubtreeModified does work and has become reasonably well supported (Firefox and WebKit have supported it for years, IE only in version 9, Opera apparently still not at all). There is no limitation relating to whether DOMContentLoaded has fired or not, so I'd suggest your test was flawed. See here for an example: http://jsfiddle.net/timdown/GB6Rz/

Other DOM mutation events such as DOMNodeInserted are better supported (although still not in IE < 9), so I'd suggest using those where possible.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Seems I had a problem in my event handlers indeed, as it now works for dynamically loaded content on Facebook, but for some mad reason it's not giving any results in Twitter. I find a dozen of HTML elements on page load (just their body), and I see different DOMSubtreeModified fire when an AJAX call reloads the body, but no events are added. Am I right to assume that in my event handler I can still use 'aEvent.originalTarget' to get the current document function(aEvent)) ? – Mojah Mar 16 '11 at 21:59
4

It sounds like you're looking for DOM Mutation Events. While DOMSubtreeModified is listed on WikiPedia page, I don't see it on MDC page. The best bet is to listen to the three MDC events and see if they do what you need.

MK_Dev
  • 3,291
  • 5
  • 27
  • 45
  • 1
    DOMSubtreeModified has been working for me – Jage Mar 14 '11 at 23:02
  • @Jage: that works for dynamically inserted elements via Ajax? If I use the DOMSubtreeModified with simple console logging, I get no additional results beside initial page parsing. – Mojah Mar 14 '11 at 23:12
  • what browser? I'm using it to detect changes from ajax specifically. I did only test in FF and chrome, to be fair. – Jage Mar 14 '11 at 23:18
0

For anyone finding this in 2017 or later, these DOM modification events have been deprecated. What you want instead is MutationObserver.

See the MutationObserver docs on MDN, or this SO answer for more details.

Community
  • 1
  • 1
jdunk
  • 2,738
  • 2
  • 17
  • 25