Bookmarklet JS: "VKontakte Videoalben"

Das berühmte soziale Netzwerk wird ständig aktualisiert, was den Nutzern nicht immer große Freude bereitet. Wie viele Leute so viele Meinungen haben, können Sie nicht jedem recht machen, und eines Tages war ich mit der neuen Art der Anzeige von Videoalben auf VKontakte nicht zufrieden.
Aber wir Programmierer sind agile Leute, wir lachen sofort - hier ist es eine freudige Gelegenheit, so etwas zu machen ... Also habe ich ein kleines Gerät gemacht, das ich teilen möchte, und mich gleichzeitig daran erinnern, was es ist und wie Lesezeichen gemacht werden.

Das Lesezeichen, das nicht bekannt ist, ist ein solches Skript in den Lesezeichen des Browsers, das zusätzlich zum (oder anstelle des) normalen Klickens auf den Link auch den erforderlichen Code ausführen kann, wodurch die verdammten Funktionen von Javascript auf eine Schaltfläche konzentriert werden. Es ist wie ein Makro.

Für mich war der vorherige Stil viel praktischer, als die Liste der Alben mit Videos auf der Seite kompakt angezeigt wurde, indem auf den Übergang zum gewünschten geklickt wurde. Also dachte ich, ich mache eine Art Lesezeichen, das diese Liste erstellt. Nachdem ich die Videoaufzeichnungsseite besucht hatte, fingerte ich im Debugger herum und stellte fest, dass Albumnamen in einem div-Element mit der Klasse "video_album_text fl_l" gespeichert sind, dieses Element in einem div mit der Klasse "video_album_info" und dieses in dem a (anchor) -Element, dessen href ist genau der richtige link zum album.

"Eureka!", Rief ich und sprang aus der Badewanne ... d.h. Es wurde herausgefunden, dass ich nur alle Elemente mit der Klasse "video_album_text fl_l" von der Seite sammeln muss, sie durchgehen und den href-Link vom übergeordneten Element des übergeordneten Elements (dies ist kein Tippfehler) jedes Elements entfernen muss.
Insgesamt wurde der folgende Code geboren:

var str = '',
        alb = document.getElementsByClassName('video_album_text fl_l');
    for (var i = 0; i < alb.length; i++) {
        var href = alb[i].parentNode.parentNode.href;
        str += '' + alb[i].innerHTML + '
'; }

getElementsByClassName funktioniert sicherlich nicht in 6, 7 und 8 IE, aber ich bin schon vor langer Zeit aus ihnen herausgewachsen und deshalb nicht. Ich sammle die Elemente in der Alb-Sammlung, durchlaufe sie und sammle die Str-Zeichenfolge aus den fertigen Links.

Dieser Fall muss noch auf der Seite angezeigt werden. Hier wird es etwas kreativer ... Ich wollte nicht nur den Block herausholen, sondern so etwas wie ein praktisches Fenster mit Kontrollknöpfen. Was zu tun ist, verwöhnt von Windows-Fenstern, danke an Bill Gates ...
Wir zeichnen ein Fenster:

var div = document.createElement('div');
    div.style.cssText = 'position:fixed;bottom:0px;left:0px;width:' + 200 + 'px;height:80%;overflow:auto;z-index:1000;background-color:white;padding:5px;border:solid 1px black;';
    div.innerHTML = '[x]'+
		'[-]'+
		'[<]'+
		'[>]
' + str; document.body.appendChild(div);


Wenn ein div-Element erstellt wird, wird ihm über die cssText-Eigenschaft ein bestimmter Stil zugewiesen. Dabei handelt es sich um ein Fenster mit fester Position, das an der unteren linken Ecke (unten: 0px; links: 0px;) und anderen nach Belieben ausgewählten Elementen (div.innerHTML) angebracht ist ) Steuerknöpfe mit onclick-Attributen werden zuerst aufgezeichnet, und dann ist str, das früher als die Deadline gesammelt wurde, eine Liste von Links. onclick ist sicherlich eine zweifelhafte Entscheidung bei der Entwicklung eines Interfaces, aber für ein Bookmarklet wird es reichen. Darüber hinaus ist dies nur ein kurzes Beispiel, und der Perfektion sind keine Grenzen gesetzt. Zum Beispiel habe ich beschlossen, die Breite des Fensters in eine separate Variable wi zu setzen.

Damit dies zu einem Lesezeichen wird, müssen Sie die Zeile „Javascript:“ am Anfang des Codes einfügen, alles in eine Zeile übersetzen (Zeilenumbrüche entfernen) und diese Zeile anstelle der Linkadresse zu den Lesezeichen Ihres Browsers hinzufügen. Ich werde wahrscheinlich nicht beschreiben, wie Lesezeichen in verschiedenen Browsern erstellt werden, da jeder, der interessiert ist, sie leicht finden kann.
Wir haben also einen so endgültigen Code, dass Sie ihn in Chrome einfach auswählen und in die Lesezeichenleiste ziehen können:

javascript:var str='', wi=200, alb = document.getElementsByClassName('video_album_text fl_l');for(var i=0;i'+alb[i].innerHTML+'
';}var div=document.createElement('div');div.style.cssText = 'position:fixed;bottom:0px;left:0px;width:'+wi+'px;height:80%;overflow:auto;z-index:1000;background-color:white;padding:5px;border:solid 1px black;';div.innerHTML = '[x][-][<][>]
'+str;document.body.appendChild(div);


Dies alles funktioniert natürlich, solange die aktuelle HTML-Struktur und die Klasse "video_album_text fl_l" erhalten bleiben.
So verwenden Sie es: Gehen Sie zur Videoseite und klicken Sie auf die Lesezeichen-Schaltfläche in der Lesezeichenleiste. Es erscheint ein Fenster mit einer Liste von Alben, die mit den Schaltflächen [x] [-] [<] [>] geschlossen, minimiert und zur Seite verschoben werden können.
Aber dieses Design sieht ungefähr so ​​aus: Ich
Bild

benutze es in Chrome, ich habe mich nicht mit Tests in anderen Browsern befasst, aber im Prinzip ist der Code einfach, er sollte nicht widersprüchlich sein. Es wird Korrekturen geben - schreibe. Vielen Dank.
Und vielen Dank für Ihre Aufmerksamkeit.

Jetzt auch beliebt: