Auswählen und Aktivieren der richtigen Steuerelemente auf einer AJAX-basierten Site

9

Also versuche ich jedes Mal, wenn ich eine nike.com-Sneaker-Seite besuche (ohne den HTML-Link), meine Schuhgröße automatisch zu wählen, sie in den Warenkorb zu legen und für mich auszuchecken.

Ich versuche gerade, dieses Skript (unten) zu benutzen, aber jedes Mal, wenn ich auf die Sneaker-Seite gehe, fügt es nicht richtig die Schuhgröße hinzu, die ich will, sondern geht einfach zur Kasse mit nichts in meinem Warenkorb.

Mir wurde gesagt, dass ich den Code an den HTML-Code der tatsächlichen Seite anpassen muss, aber ich weiß nicht, wie ich das machen soll. Bitte helfen.

%Vor%


Link auf die "Zielseite"
Momentaufnahme des Ziel-HTML (falls die Zielseite von Nike entfernt oder geändert wurde )

    
Nite 24.02.2013, 03:06
quelle

1 Antwort

22

Anstatt nur das Skript von der Frage abzuändern, hoffe ich, einen kurzen Überblick darüber zu geben, wie man diese Art von Seiten und Aktionen mit Greasemonkey / Tampermonkey skripten kann.

Die Schritte sind:

  1. Achten Sie sorgfältig darauf, was Sie manuell tun. Beachten Sie besonders die Elemente, die durch das JavaScript der Seite hinzugefügt / geändert wurden, und die erforderliche Schrittfolge, falls vorhanden.

  2. Mit Firebug und / oder dem Inspektor von Firefox und / oder den Entwicklertools von Chrome können Sie CSS / jQuery-Selektoren für alle ermitteln der Elemente, die Sie lesen oder manipulieren. Dies ist besonders einfach mit Firebug zu tun.

  3. Verwenden Sie jQuery, um statisches HTML zu manipulieren. Verwenden Sie waitForKeyElements , um Knoten zu bearbeiten, die von JavaScript (AJAX) hinzugefügt oder geändert wurden. Verwenden Sie die Greasemonkey-API - die auch von Tampermonkey unterstützt wird und teilweise von Chrome-Nutzern unterstützt wird - um domänenübergreifend zu arbeiten Seitenaufrufe oder zum Speichern beliebiger Werte zwischen Seitenladungen für domänenübergreifende Seitensätze.

Spezifisches Beispiel:

  1. Für das Ziel des OP Seiten möchte das OP: (a) automatisch die Schuhgröße auswählen, (b) die Schuhe in den Einkaufswagen legen und (c) auf die Schaltfläche zum Auschecken klicken.

    Dies erfordert das Warten auf und / oder Klicken auf fünf (5) Seitenelemente wie folgt:


  2. Mit Firebug (oder einem ähnlichen Tool) erhalten wir die HTML-Struktur für die Schlüsselknoten. Zum Beispiel hat das SIZE -Dropdown HTML wie folgt:

    %Vor%

    Wo der Link tatsächlich ein mousedown Ereignis auslöst, kein Klick.

    Firebug gibt uns einen CSS Pfad von:

    %Vor%

    Worauf wir uns beschränken können:

    %Vor%

    für einen vernünftigen Selektor, der wahrscheinlich triviale Seitenänderungen übersteht und wahrscheinlich nicht auf unerwünschten Seiten / Produkten ausgelöst wird.

    ~~~~~~~~~~~~

    Beachten Sie, dass Firebug auch hilft, zu sehen, welche Ereignisse an was angehängt sind, was entscheidend ist, wenn wir bestimmen, was wir auslösen müssen. Für diesen Knoten sehe ich zum Beispiel:

    Dieser Link hat weder href , noch hört er nach click -Ereignissen. In diesem Fall müssen wir ein mousedown (oder keydown ) auslösen.

    ~~~~~~~~~~~~

    Mit einem ähnlichen Prozess für die anderen 4 Schlüsselknoten erhalten wir CSS / jQuery-Selektoren von:

    %Vor%


  3. Schließlich verwenden wir waitForKeyElements , um die erforderlichen Ereignisse an die Schlüsselknoten zu senden und sie in der richtigen Reihenfolge der Operationen zu durchlaufen.

Das resultierende vollständige, funktionierende Skript lautet:

%Vor%     
Brock Adams 24.02.2013, 14:02
quelle