AJAX tarafından yönetilen bir sitede doğru denetimlerin seçilmesi ve etkinleştirilmesi

Question

Dolayısıyla, herhangi bir nike.com spor ayakkabı sayfasını (HTML bağlantısı olmadan) her ziyaret ettiğimde, onu otomatik olarak ayakkabı bedenimden seçmeye çalışıyorum. sepete ve beni kontrol ediyor.

Şu anda bu komut dosyasını (aşağıda) kullanmaya çalışıyorum, ancak spor ayakkabı sayfasına her gittiğimde, istediğim ayakkabı boyutunu tam olarak eklemiyor, ancak doğrudan sepette hiçbir şey olmadan ödeme yapmaya gidiyor.

Kodu, gerçek sayfa HTML'siyle eşleştirmem gerektiğini söylüyorum, ancak bunu nasıl yapacağımı bilmiyorum. Lütfen yardım et.

// ==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 sadece sorudan senaryoyu değiştirmek daha ziyade

Answer 1

(durumunda hedef sayfası kaldırılır veya Nike tarafından değiştirildi), nasıl genel bir özetini yapmak istiyoruz Greasemonkey/Tampermonkey ile bu tür sayfa ve eylemleri betik.

adımlar şunlardır:

1. elle yaptığımız işin dikkatli dikkat edin. Sayfanın javascript'i tarafından eklenen/değiştirilen öğelerin özel notunu ve varsa adımların gerekli sıralamasını alın. Firebug ve/veya Firefox'un müfettiş ve/veya Chrome'un Geliştirici araçları kullanma

2. , CSS/jQuery seçici en okumak veya manipüle edecek elemanların tümü için belirler. Bu Firebug kullanarak yapmak çok kolay.

3. Statik HTML'yi değiştirmek için jQuery'yi kullanın. Javascript (AJAX) tarafından eklenen veya değiştirilen düğümleri işlemek için waitForKeyElements kullanın. Etki alanları arası sayfa çağrıları yapmak veya tüm alanları sayfalar arası alanlar için sayfa yüklemeleri arasında saklamak üzere, Tampermonkey tarafından desteklenen ve kısmen Chrome kullanıcı belgeleri tarafından desteklenen, the Greasemonkey API'u kullanın.

---

---

özel örnek: (b) alışveriş sepetine ayakkabı eklemek, (a) otomatik ayakkabı boyutunu seçin:

1. the OP's target pages için, OP istiyor ve (c) ödeme düğmesini tıklayın.

   Bu beş (5) sayfa öğelerini şöyle, bekleyen ve/veya tıklayarak gerektirir: Firebug (veya benzeri bir alet kullanarak

   

   

   
   

2. ) Anahtar düğümlerin HTML yapısını elde ederiz.Örneğin, BOYUT açılır böyle HTML var:

   bağlantısı aslında bir mousedown olayı değil, bir tık ateşler

   <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> 
   

   . Önemsiz sayfa değişiklikleri hayatta kalmak için muhtemel ve istenmeyen üzerinde tetiklemek için olası değildir makul seçici için

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

   : Biz aşağı pare olabilir

   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 
   

   :

   Kundakçı bize bir CSS yolunu verir sayfalar/ürünleri. Kundakçı da bize tetiklemek için gerekenleri belirlerken çok önemlidir Ne gibi, bağlı hangi olayların görmenize yardımcı olur

   ~~~~~~~~~~~~~
   Not. Örneğin, bu düğüm için, görüyorum:

   

   Bu bağlantı yok href vardır, ne de click olayları dinlemek gelmez. Bu durumda, biz tetiklemek gerekir mousedown (veya 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. Diğer 4 temel düğüm için de benzer bir işlem kullanılarak

   ~~~~~~~~~~~~~
   biz CSS/jQuery seçicileri elde

   Son olarak, anahtar düğümler için gerekli olayları göndermek ve işlemlerin doğru sırayla içinden diziye waitForKeyElements kullanın.

Oluşan, tam komut çalışıyor:

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