javascript – 在AJAX驱动的网站上选择并激活正确的控件

因此,我每次访问任何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(如果目标页面被Nike删除或更改)

解决方法:

我希望快速概述如何使用Greasemonkey / Tampermonkey编写这些页面和操作的脚本,而不仅仅是改变问题中的脚本.

步骤是：

>仔细记录您手动执行的操作.特别注意页面的javascript添加/更改的元素,以及所需的步骤序列(如果有).
>使用Firebug和/或Firefox的检查器和/或Chrome的开发人员工具,确定您将阅读或操作的所有元素的CSS / jQuery选择器.使用Firebug特别容易.
>使用jQuery来操作静态HTML.使用waitForKeyElements来处理由javascript(AJAX)添加或更改的节点.使用the Greasemonkey API(Tampermonkey也支持并且Chrome用户脚本部分支持)可以进行任何跨域页面调用,或者在页面加载之间存储任何值以用于跨域页面集.

具体例子：

>对于the OP’s target pages,OP希望：(a)自动选择鞋子尺寸,(b)将鞋子添加到购物车,以及(c)单击结帐按钮.

这需要等待和/或点击五(5)个页面元素,如下所示：

>使用Firebug(或类似工具),我们获得关键节点的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事件,而不是点击.

Firebug给我们一个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

对于一个合理的选择器,它可能会在琐碎的页面更改中存活,并且不太可能触发不需要的页面/产品.

~~~~~~~~~~~~~
请注意,Firebug还可以帮助我们查看哪些事件附加到哪些事件,这在确定我们需要触发的内容时至关重要.例如,对于该节点,我看到：

该链接没有href,也没有侦听点击事件.在这种情况下,我们必须触发mousedown(或keydown).

~~~~~~~~~~~~~
对其他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

>最后,我们使用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);
}