Geek asks and answers

How can I detect an AJAX node insertion without using DOM mutation events?

I am trying to write a Greasemonkey script that modifies keywords in Twitter posts. The problem is that the content is "late loading" and is added at the request of the user.

If I were to add event listeners to the added elements, I could use jQuery delegate(). Since I just want to change the content when it is downloaded, this does not seem to be appropriate.

Mutation events seem to fit the bill. They are specific to Gecko, but that doesn't really matter for the Greasemonkey script. The problem is that they were depreciated for a set of very good reasons .

Of course, I could use a timer and poll the DOM at regular intervals, but it just seems icky.

How can I detect add-ons to the DOM and respond to inserted elements?

+3
source share
1 answer

If you want to discover the nodes created by AJAX, your parameters (besides the Mutation events that you are wise to exclude):

  • Poll with an interval or timer.
  • Trying to connect to AJAX requests on a page (if any).
  • Enabling, capturing, or replacing javascript pages.

I did it all in one go, and all but one have serious flaws:

  • javascript ( ), , , . javascript .
  • AJAX , , .
  • , , , .

waitForKeyElements() . . :

// ==UserScript==
// @name    Highlight good comments
// @include http://SOME_SITE/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

function highlightGoodComments (jNode) {
    if (/beer/i.test (jNode.text () ) ) {
        jNode.css ("background", "yellow");
    }
}

waitForKeyElements ("#userBlather div.comment", highlightGoodComments);
+8

More articles:


All Articles