2011-11-26 3 views
27

मैं एक उपयोगकर्ता स्क्रिप्ट पर काम कर रहा हूं और मुझे पता चला है कि मुख्य पृष्ठ AJAX अनुरोध करता है जब स्क्रिप्ट नहीं चलती है।AJAX अनुरोध पर आग Greasemonkey स्क्रिप्ट

क्या मुख्य पृष्ठ लोड और AJAX अनुरोधों पर उपयोगकर्ता स्क्रिप्ट को आग लगाने का कोई तरीका है?

उत्तर

56

AJAX अनुरोधों पर स्क्रिप्ट के कोड को पुन: चालू करने का स्मार्ट तरीका पृष्ठ के मुख्य बिट्स पर ध्यान केंद्रित करना और परिवर्तनों की जांच करना है।

उदाहरण के लिए, तो तरह एक पेज निहित एचटीएमएल लगता है:

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

और आप प्रत्येक टिप्पणी के साथ कुछ करने के लिए के रूप में यह में आया स्क्रिप्ट चाहता था

अब आप सकता है अवरोधन सभी AJAX। कॉल, या DOMSubtreeModified (बहिष्कृत) के लिए सुनो, या MutationObserver एस का उपयोग करें, लेकिन इन विधियों को मुश्किल, जटिल और अत्यधिक जटिल हो सकता है।

जंगली पृष्ठ पर AJAX- ified सामग्री प्राप्त करने के लिए एक सरल, अधिक मजबूत तरीका नीचे waitForKeyElements फ़ंक्शन जैसे कुछ का उपयोग करके मतदान करना है।

उदाहरण के लिए, इस स्क्रिप्ट, टिप्पणी है कि "बियर" शामिल उजागर करेगा के रूप में वे AJAX-इन:

// ==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; 
} 

अद्यतन:

सुविधा के लिए, waitForKeyElements() अब hosted on GitHub है।

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

+0

मैं

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

फिर इस तरह की एक Greasemonkey स्क्रिप्ट इसे संशोधित करने में सक्षम होगा क्षमा चाहते हैं, त्रुटियां वास्तव में ज़ीरोक्लिपबोर्ड के साथ झूठ बोलती हैं, न कि आपके कार्य। डिबगिंग के दौरान मैंने खोजी एक दिलचस्प बात यह है कि अगर 'bWaitOnce'' सत्य 'पर सेट किया गया है तो कोड वास्तव में दो बार आग लग जाता है, सुनिश्चित नहीं है कि यह जानबूझकर था या नहीं – RozzA

+0

@RozzA, मुझे उस कोड को देखने में दिलचस्पी होगी जो इसे प्रदर्शित करता है। कोड के हिस्सों में डिजाइन द्वारा दो बार (या कई बार) आग लग सकती है। लेकिन 'क्रिया समारोह' केवल प्रति दिए गए नोड में एक बार आग लगाना चाहिए। –

+0

@ ब्रॉकएडम्स, क्यों 'सेट इंटरवल' और 'उत्परिवर्तन ऑब्सर्वर' नहीं? –

0

एक और तरीका - सरल और छोटा लेकिन कम लचीला - AJAX/jQuery लोड करने और समाप्त करने के लिए जावास्क्रिप्ट समय विलंब का उपयोग करना है। उदाहरण के लिए, यदि निम्न HTML गतिशील पहले लोड के बाद बनाया गया:

// 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; 
    } 
} 
यहाँ

मार्गदर्शन देखें: Sleep/Pause/Wait in Javascript

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^