AJAX- संचालित साइट पर सही नियंत्रण चुनना और सक्रिय करना

Question

तो, मैं इसे बनाने की कोशिश कर रहा हूं, हर बार जब मैं किसी भी nike.com स्नीकर पेज (HTML लिंक के बिना) पर जाता हूं, तो यह स्वचालित रूप से मेरे जूता आकार को चुनता है, इसे जोड़ता है गाड़ी के लिए, और मेरे लिए बाहर की जाँच करता है।

मैं वर्तमान में इस स्क्रिप्ट (नीचे) का उपयोग करने की कोशिश कर रहा हूं, लेकिन हर बार जब मैं स्नीकर पेज पर जाता हूं, तो यह जूते के आकार को सही ढंग से जोड़ता नहीं है, लेकिन सीधे मेरे कार्ट में कुछ भी नहीं के साथ चेकआउट पर जाता है।

मुझे बताया गया है कि मुझे कोड को वास्तविक पृष्ठ HTML से मिलान करने की आवश्यकता है, लेकिन मुझे नहीं पता कि यह कैसे करना है। कृपया मदद करे।

// ==UserScript== 
// @name  _Nike auto-buy(!!!) script 
// @include http://*/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js 
// @grant GM_addStyle 
// ==/UserScript== 
/*- The @grant directive is needed to work around a design change 
    introduced in GM 1.0. It restores the sandbox. 
*/ 

var okayToClickAddtoCart = false; 

//-- Assumes that size is a standard <option> tag or similar... 
waitForKeyElements (".selectBox-label[value='10']", selectShoeSize); 

function selectShoeSize (jNode) { 
    jNode.prop ('selected', true); 

    okayToClickAddtoCart = true; 
} 


waitForKeyElements (".add-to-cart.nike-button", clickAddToCart); 

function clickAddToCart (jNode) { 
    if (! okayToClickAddtoCart) { 
     return true; //-- Don't click yet. 
    } 

    var clickEvent = document.createEvent ('MouseEvents'); 
    clickEvent.initEvent ('click', true, true); 
    jNode[0].dispatchEvent (clickEvent); 
} 


waitForKeyElements (".checkout-button", clickCheckoutButton); 

function clickCheckoutButton (jNode) { 
    var clickEvent = document.createEvent ('MouseEvents'); 
    clickEvent.initEvent ('click', true, true); 
    jNode[0].dispatchEvent (clickEvent); 
} 

Link to the "target page"
Snapshot of the target HTML

Answer 1

(मामले में लक्ष्य पेज को हटाया या नाइके द्वारा बदल दिया गया है) के बजाय सिर्फ सवाल से स्क्रिप्ट को बदलने, मैं करने के लिए कैसे की एक त्वरित रूपरेखा बनाने के लिए आशा Greasemonkey/Tampermonkey के साथ इस तरह के पृष्ठों और कार्यों स्क्रिप्ट।

कदम हैं:

1. क्या आप स्वयं कर से सावधान नोट लें। पृष्ठ के जावास्क्रिप्ट द्वारा जोड़े गए/परिवर्तित तत्वों का विशेष नोट लें, और यदि कोई हो, तो आवश्यक अनुक्रम।

2. Firebug, और/या Firefox के निरीक्षक, और/या Chrome की डेवलपर टूल का उपयोग करना, सीएसएस/jQuery चयनकर्ता के निर्धारित तत्वों आप पढ़ सकते हैं या हेरफेर होगा सभी के लिए। फ़ायरबग का उपयोग करना विशेष रूप से आसान है।

3. स्थिर HTML में हेरफेर करने के लिए jQuery का उपयोग करें। जावास्क्रिप्ट (AJAX) द्वारा जोड़े गए या परिवर्तित नोड्स को संभालने के लिए waitForKeyElements का उपयोग करें। the Greasemonkey API का उपयोग करें - जिसे टैम्पर्मोनकी द्वारा भी समर्थित किया गया है और आंशिक रूप से क्रोम उपयोगकर्ता स्क्रिप्ट द्वारा समर्थित है - किसी भी क्रॉस-डोमेन पेज कॉल करने के लिए, या पृष्ठों के क्रॉस-डोमेन सेट के लिए पृष्ठ लोड के बीच किसी भी मान को स्टोर करने के लिए।

---

---

विशिष्ट उदाहरण: (क) स्वचालित रूप से जूते का आकार का चयन करें, (ख) शॉपिंग कार्ट में जूते जोड़ें:

1. the OP's target pages के लिए, ओ पी चाहता है , और (सी) चेकआउट बटन पर क्लिक करें।

   इस के लिए इंतज़ार कर, और/या पर क्लिक करके, पांच (5) पृष्ठ तत्वों इसलिए की तरह की आवश्यकता है:

   

   

   
   

2. Firebug (या इसी तरह उपकरण का उपयोग) हम कुंजी नोड्स के लिए एचटीएमएल संरचना प्राप्त करते हैं।उदाहरण के लिए, आकार लटकती इस तरह एचटीएमएल है:

   <div class="size-quantity"> 
       <span class="sizeDropdown selectBox-open"> 
        ... 
        <label class="dropdown-label selectBox-label-showing">SIZE</label> 
        ... 
        <a class="selectBox size-dropdown mediumSelect footwear selectBox-dropdown" ...> 
         ... 
        </a> 
       </span> 
   </div> 
   

   कहाँ लिंक वास्तव में कोई mousedown घटना, नहीं एक क्लिक दूर सक्रिय करता है। एक उचित चयनकर्ता कि और तुच्छ पेज परिवर्तन जीवित रहने की संभावना अवांछित पर ट्रिगर होने की संभावना नहीं है के लिए

   div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown 
   

   :

   html.js body div#body div#body-wrapper.fullheight div#body-liner.clear div#content div#pdp.footwear div#product-container.clear div.pdp-buying-tools-container div.pdp-box div.buying-tools-container div#PDPBuyingTools.buying-tools-gadget form.add-to-cart-form div.product-selections div.size-quantity span.sizeDropdown a.selectBox 
   

   कौन सा हम करने के लिए नीचे धीरे-धीरे कम कर सकते हैं:

   Firebug हम में से एक सीएसएस पथ देता है पृष्ठों/उत्पादों।

   ~~~~~~~~~~~~~
   नोट Firebug भी मदद करता है कि चलो देखते हैं कि घटनाओं क्या है, जो महत्वपूर्ण है का निर्धारण करते समय हम क्या गति प्रदान करने की जरूरत है से जुड़े होते हैं। उदाहरण के लिए, उस नोड के लिए, मैं देख रहा हूँ:

   

   वह लिंक नहीं href है, न ही यह click घटनाओं के लिए सुनने है। इस मामले में, हमें mousedown (या keydown) ट्रिगर करना होगा।

   Node 1:  div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown 
   
   Node 2:  ul.selectBox-dropdown-menu li a:contains('10') 
         (But this will need an additional check) 
   
   Node 3:  div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains('(10)') 
   
   Node 4:  div.footwear form.add-to-cart-form div.product-selections div.add-to-cart 
   
   Node 5:  div.mini-cart div.cart-item-data a.checkout-button:visible 
   

   
   

3. :

   ~~~~~~~~~~~~~
   अन्य 4 कुंजी नोड्स के लिए इसी तरह की प्रक्रिया का उपयोग करना, हम में से सीएसएस/jQuery चयनकर्ताओं प्राप्त

   अंत में, हम महत्वपूर्ण नोड्स को आवश्यक ईवेंट भेजने और संचालन के उचित क्रम के माध्यम से अनुक्रमित करने के लिए waitForKeyElements का उपयोग करते हैं।

जिसके परिणामस्वरूप, पूरा, काम स्क्रिप्ट है:

// ==UserScript== 
// @name  _Nike auto-buy shoes(!!!) script 
// @include http://store.nike.com/* 
// @include https://store.nike.com/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js 
// @grant GM_addStyle 
// ==/UserScript== 
/*- The @grant directive is needed to work around a design change 
    introduced in GM 1.0. It restores the sandbox. 
*/ 

var targetShoeSize = "10"; 

//-- STEP 1: Activate size drop-down. 
waitForKeyElements (
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown", 
    activateSizeDropdown 
); 
function activateSizeDropdown (jNode) { 
    triggerMouseEvent (jNode[0], "mousedown"); 

    //-- Setup step 2. 
    waitForKeyElements (
     "ul.selectBox-dropdown-menu li a:contains('" + targetShoeSize + "'):visible", 
     selectDesiredShoeSize 
    ); 
} 

//-- STEP 2: Select desired shoe size. 
function selectDesiredShoeSize (jNode) { 
    /*-- Because the selector for this node is vulnerable to false positives, 
     we need an additional check here. 
    */ 
    if ($.trim (jNode.text()) === targetShoeSize) { 
     //-- This node needs a triplex event 
     triggerMouseEvent (jNode[0], "mouseover"); 
     triggerMouseEvent (jNode[0], "mousedown"); 
     triggerMouseEvent (jNode[0], "mouseup"); 

     //-- Setup steps 3 and 4. 
     waitForKeyElements (
      "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox " 
      + "span.selectBox-label:contains('(" + targetShoeSize + ")')", 
      waitForShoeSizeDisplayAndAddToCart 
     ); 
    } 
} 

//-- STEPS 3 and 4: Wait for shoe size display and add to cart. 
function waitForShoeSizeDisplayAndAddToCart (jNode) { 
    var addToCartButton = $(
     "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart" 
    ); 
    triggerMouseEvent (addToCartButton[0], "click"); 

    //-- Setup step 5. 
    waitForKeyElements (
     "div.mini-cart div.cart-item-data a.checkout-button:visible", 
     clickTheCheckoutButton 
    ); 
} 

//-- STEP 5: Click the checkout button. 
function clickTheCheckoutButton (jNode) { 
    triggerMouseEvent (jNode[0], "click"); 

    //-- All done. The checkout page should load. 
} 

function triggerMouseEvent (node, eventType) { 
    var clickEvent = document.createEvent('MouseEvents'); 
    clickEvent.initEvent (eventType, true, true); 
    node.dispatchEvent (clickEvent); 
}