About

About

Bookmarklet oder Favelet erstellen

Seitenübersicht

» Erstellen eines Bookmarklets

» Formularelemente

» Durch Listen iterieren

» Beispiel

Info

Erstellt: 2007

Ein Bookmarklet (auch Favelet genannt) ist ein kleines Skript das als Bookmark abgespeichert wird. Durch den Aufruf des Bookmarks wird das Skript auf der im aktuellen Fenster des Browsers angezeigten Webseiteseite ausgeführt.

Bookmarklets eigenen sich deshalb besonders für wiederkehrende Aufgaben, z.B. das Ausfüllen eines Webformulars beim Testen oder auch zum Hinzufügen einer Webseite zu einem Bookmarkservice wie » Delicious.

Erstellen eines Bookmarklets

Bookmarklets werden mit Javascript erstellt. Zu Beachten ist bei der Erstellung eines Bookmarklets, dass alles in einer Zeile steht, diese mit javascript: beginnt und mit void(0); endet. Es kann auf alle Elemente des Document Object Models über das document-Element zugegriffen werden.

Der abschliessende void Operand ist wichtig, da er einen Rückgabewert verhindert. Ohne void würde das Bookmarklet zu einer neuen Seite verzweigen und den Rückgabewert anzeigen.

Formularelemente

Über das Bookmarklets kann der Inhalt von Formularelementen geändert werden. Ein Text in ein Textfeld setzen ist genauso möglich wie eine Checkbox auswählen:

Textfeld: 	vorname.value='Lieschen'
Auswahliste:	anrede.options[1].selected=true
Checkbox:	newsletter.checked = true

Iterieren durch eine Liste

Auch iterieren lässt sich gut über die Elemente eines Formulars. Folgendes Bookmarklet habe ich in einem Forum verwendet um über das Webinterface mehrere hundert von Spam-Einträgen zu löschen. Dazu musste jeder Eintrag einzeln in einer Liste angeklickt werden.

Das Skript selektiert alle Einträge im ersten Formular mit einer Indexnummer von 59 und 200:

javascript:with(document.forms[0]){
    for (i=59;i<=200;i++) {
        elements[i].checked = true
    }
};
void(0);
Anzeige:

Beispiele der Anwendung

Titel und Hyperlink einer Webseite extrahieren

Das folgende Bookmarklet erzeugt ein neues Fenster und schreibt dort den Title und den Hyperlink der Webseite aus auf der das Skript ausgeführt wurde:

javascript:
myFenster=open('','_blank','width=400,height=200');
myFenster.document.write(document.title);
myFenster.document.write(': ');
myFenster.document.write('<br />');
myFenster.document.write(window.location.toString());
myFenster.focus();
void(0);

Bookmarklet: Titel und Hyperlink

Mit der open-Methode wird ein neues Fenster erzeugt. Über die Referenz myFenster kann anschliessend auf das Document Object Model des neuen Fenstern zugegriffen werden. Über myFenster.document.write kann neuer Text hinzugefügt werden. Das Skript selber läuft auf der alten Seite und somit kann auf dem Title des Fenster über document.title zugegriffen werden. Der Hyperlink der Seite kann über window.location.toString() ermittelt werden. Zum Schluss erhält das neue Fenster noch den Focus und kommt so in den Vordergrund.