选择并激活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); 
}