Fire Greasemonkey skrypt na żądanie AJAX

Question

Pracuję nad skryptem użytkownika i właśnie odkryłem, że skrypt nie jest uruchamiany, gdy strona główna wysyła żądania AJAX.

Czy istnieje sposób na uruchomienie skryptu użytkownika zarówno podczas ładowania strony głównej, jak i żądań AJAX?

Answer 1

Sprytnym sposobem na ponowne uruchomienie kodu skryptu w żądaniach AJAX jest skupienie się na kluczowych bitach strony i sprawdzenie zmian.

Na przykład, załóżmy, że strony zawierały HTML tak:

<div id="userBlather"> 
    <div class="comment"> Comment 1... </div> 
    <div class="comment"> Comment 2... </div> 
    ... 
</div> 

i chciałeś skrypt do zrobienia czegoś z każdego komentarza, ponieważ wszedł w

Teraz mógł przechwytujący wszystko AJAX. wywołań, lub nasłuchiwać DOMSubtreeModified (przestarzałe), lub użyć MutationObserver s, ale te metody mogą być trudne, skomplikowane i skomplikowane.

Prostszym, skuteczniejszym sposobem uzyskania zawartości ajax-ified na stronie wieloznacznej jest odpytanie jej za pomocą funkcji podobnej do poniższej: waitForKeyElements.

Na przykład, skrypt zaprezentuje komentarzy, które zawierają "piwo", gdy AJAX w:

// ==UserScript== 
// @name   _Refire on key Ajax changes 
// @include   http://YOUR_SITE.com/YOUR_PATH/* 
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js 
// ==/UserScript== 

function highlightGoodComments (jNode) { 

    //***** YOUR CODE HERE ***** 

    if (/beer/i.test (jNode.text())) { 
     jNode.css ("background", "yellow"); 
    } 
    //... 
} 
waitForKeyElements ("#userBlather div.comment", highlightGoodComments); 

/*--- waitForKeyElements(): A utility function, for Greasemonkey scripts, 
    that detects and handles AJAXed content. 

    IMPORTANT: This function requires your script to have loaded jQuery. 
*/ 
function waitForKeyElements (
    selectorTxt, /* Required: The jQuery selector string that 
         specifies the desired element(s). 
        */ 
    actionFunction, /* Required: The code to run when elements are 
         found. It is passed a jNode to the matched 
         element. 
        */ 
    bWaitOnce,  /* Optional: If false, will continue to scan for 
         new elements even after the first match is 
         found. 
        */ 
    iframeSelector /* Optional: If set, identifies the iframe to 
         search. 
        */ 
) { 
    var targetNodes, btargetsFound; 

    if (typeof iframeSelector == "undefined") 
     targetNodes  = $(selectorTxt); 
    else 
     targetNodes  = $(iframeSelector).contents() 
              .find (selectorTxt); 

    if (targetNodes && targetNodes.length > 0) { 
     btargetsFound = true; 
     /*--- Found target node(s). Go through each and act if they 
      are new. 
     */ 
     targetNodes.each (function() { 
      var jThis  = $(this); 
      var alreadyFound = jThis.data ('alreadyFound') || false; 

      if (!alreadyFound) { 
       //--- Call the payload function. 
       var cancelFound  = actionFunction (jThis); 
       if (cancelFound) 
        btargetsFound = false; 
       else 
        jThis.data ('alreadyFound', true); 
      } 
     }); 
    } 
    else { 
     btargetsFound = false; 
    } 

    //--- Get the timer-control variable for this selector. 
    var controlObj  = waitForKeyElements.controlObj || {}; 
    var controlKey  = selectorTxt.replace (/[^\w]/g, "_"); 
    var timeControl  = controlObj [controlKey]; 

    //--- Now set or clear the timer as appropriate. 
    if (btargetsFound && bWaitOnce && timeControl) { 
     //--- The only condition where we need to clear the timer. 
     clearInterval (timeControl); 
     delete controlObj [controlKey] 
    } 
    else { 
     //--- Set a timer, if needed. 
     if (! timeControl) { 
      timeControl = setInterval (function() { 
        waitForKeyElements ( selectorTxt, 
              actionFunction, 
              bWaitOnce, 
              iframeSelector 
             ); 
       }, 
       300 
      ); 
      controlObj [controlKey] = timeControl; 
     } 
    } 
    waitForKeyElements.controlObj = controlObj; 
} 

---

Aktualizacja:

Dla wygody waitForKeyElements() jest teraz hosted on GitHub.

This answer shows an example of how to use the hosted function.

Answer 2

Innym sposobem - prostszym i mniejszym, ale mniej elastycznym - jest użycie opóźnienia czasu JavaScript, aby czekać na załadowanie i zakończenie AJAX/jQuery. Na przykład, jeśli następujące HTML dynamicznie generowane po pierwszym obciążenia:

<div id="userBlather"> 
    <div class="comment"> Comment 1... </div> 
    <div class="comment"> Comment 2... </div> 
    ... 
</div> 

Następnie skryptów Greasemonkey jak to będzie mógł go modyfikować:

// Wait 2 seconds for the jQuery/AJAX to finish and then modify the HTML DOM 
window.setTimeout(updateHTML, 2000); 

function updateHTML() 
{ 
    var comments = document.getElementsByClassName("comment"); 
    for (i = 0; i < comments.length; i++) 
    { 
     comments[i].innerHTML = "Modified comment " + i; 
    } 
} 

Patrz wytyczne tutaj: Sleep/Pause/Wait in Javascript