選擇並激活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. 注意一定要小心你手動做什麼。特別注意由頁面的javascript添加/更改的元素，以及所需的步驟順序（如果有）。

2. 使用螢火蟲，和/或Firefox的檢查，和/或Chrome的開發工具，確定CSS/jQuery選擇對所有你會讀到或操縱的元素。使用Firebug特別容易。

3. 使用jQuery來操縱靜態HTML。使用waitForKeyElements來處理由javascript（AJAX）添加或更改的節點。使用the Greasemonkey API - 也受Tampermonkey支持，部分受Chrome用戶腳本支持 - 可以執行任何跨域頁面調用，也可以在跨頁面頁集的頁面加載之間存儲任何值。

---

---

具體示例：

1. 對於the OP's target pages中，OP希望：（1）自動選擇鞋的尺寸，（b）該鞋添加到購物車中，（c）點擊結帳按鈕。

   這需要等待，和/或點擊，像這樣五（5）頁面元素：

   

   

   
   

2. 使用螢火蟲（或類似工具）我們獲得關鍵節點的HTML結構。例如，SIZE下拉具有HTML這樣的：

   <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事件，而不是點擊。

   螢火蟲給我們的CSS路徑：我們可以削減下來

   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 
   

   ：

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

   一個合理的選擇這是可能生存瑣碎的頁面變化，不太可能觸發不必要的頁/產品。

   ~~~~~~~~~~~~~
   注意，螢火蟲也幫助我們看到連接到什麼，決定什麼，我們需要觸發時，這是至關重要的哪些事件。例如，對於該節點上，我看到：

   

   這種聯繫沒有href，也不聽click事件。在這種情況下，我們必須觸發mousedown（或​​）。

   ~~~~~~~~~~~~~
   使用類似的過程用於其它4個關鍵節點，我們得到的CSS/jQuery選擇：

   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. 最後，我們使用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); 
}