"Bookmarklets" sind im Browser abgelegte Bookmarks (bzw. "Favoriten") hinter denen sich keine Internet-Adresse sondern kleine Javascript-Programme verbergen. Diese können dank des DOMs (Document Object Model) des Browsers die Anzeige der im Browserfenster geladenen Seite verändern. Und das kann man sich als Web-Producer zu nutze machen um Probleme auf der Seite auf der Spur zu kommen, oder die Tricks und Kniffe anderer Websites zu ergründen.

Bookmarklets beruhen auf dem Prinzip das sich Javascripts in den meisten Browsern in einer URL "verpacken" und ausführen lassen. Das kann man durch eine Eingabe in der URL-Zeile ausprobieren. Einfach eingeben: "javascript:alert('Doh!');". Das Schlüsselwort "javascript", gefolgt vom Doppelpunkt ist die Angabe eines Pseudo-Protokoll und weist den Browser darauf hin daß der folgende Text nicht als Internetadresse, sondern als Javascript-Befehl zu interpretieren ist. Der Javascript-Befehl "alert" öffnet ein kleines Fenster mit einer Meldung.

Diese Zeile wird also vom Browser wie eine URL behandelt, und läßt sich folglich genauso in einem HTML-Dokument als Link unterbringen oder als Bookmark abspeichern. Das bedingt übrigens auch einen Nachteil der meisten Bookmarklets: sie kommen nur mit HTML-Dokumenten klar, die nicht in einem Frameset liegen.

Auf der Site www.bookmarklets.com finden Sie eine erste Sammlung von Bookmarklets. So zum Beispiel ein Bookmarklet welches im Browserfenster alle 216 sogenannten "websafe" Farben ausgibt.

Auf http://cleverchimp.com/dev_utilities/macie5lets/ sind einige interessante Bookmarklets von Tantek Çelik, einem der Entwickler der Mac-Version des Microsoft Internet Explorers 5 und Microsoft-Representant im W3C. Mit diesen Bookmarklets lassen sich Cascading Style Sheets (CSS) ein- und ausschalten, oder in einem neuen Browserfenster auflisten. Darüberhinaus kann man die sich gerade im Browserfenster befindliche HTML-Seite per Bookmarklet zur Überprüfung an die entsprechenden HTML- und CSS-Validatoren des W3C schicken.

Umfangreicher sind die Validatoren-Bookmarklets auf http://www.gazingus.org/weblog/2001/03/#bookmarklets die auch die Online-Überprüfung auf Accessibility durch Bobby beinhalten (die Gazingus-Site scheint momentan down zu sein (Okt. 2003)).

Bookmarklets sind eigentlich normale Javascripts, mit der Einschränkung das alles in nur einer Zeile programmiert werden muss, weswegen man sich teilweise schwer lesbarer Javascript-Konstrukte bedienen muß. Wenn man aber einmal hinter bestimmte Mechanismen gekommen ist, fällt es leicht diese für andere Bookmarklets zu benützen.

BorderToggle ist ein Bookmarklet daß den Browser veranlaßt bei allen Tabellen der aktuell geladenen Seite den Rahmen auf 1 Pixel Breite zu setzen und dadurch sichtbar zu machen. Wenn wie im eingangs erwähnten Beispiel ein Tabellenlayout verrückt spielt, kann man Hilfe von BorderToggle die problematische Zelle aufspüren und erkennen das z.B. eine Spalte breiter läuft als eigentlich vorgesehen.

Ich bin vor über einem Jahr auf einer mir nicht mehr bekannten Site über dieses Bookmarklet gestolpert und habe es nun für den DOM-Standard angepasst, so daß es sowohl im Internet Explorer als auch Netscape 6-Browser läuft.

Das dem Bookmarklet zugrundeliegende Javascript geht sämtliche Tabellen des HTML-Dokumentes durch, und setzt das Attribut "border" auf "1", also 1 Pixel Breite.

Test von BorderToggle

Der erste Teil des Javascript-Konstrukts durchwandert in einer Schleife alle TABLE-Elemente: for(i=0;i<document.getElementsByTagName('TABLE').length;i++)

Durch document.getElementsByTagName('TABLE').length wird die Anzahl der im Dokument vorhandenen TABLE-Elemente bestimmt und in der FOR-Schleife einzelnd abgearbeitet. Für jedes TABLE-Element wird dann mit einer abgekürzten Form des Javascript-Konstrukts IF-THEN-ELSE der Zustand des Tabellenrahmen überprüft: document.getElementsByTagName('TABLE')[i].border=='0')?'1':'0'

Die Bedingung (wenn border-Attribut gleich Null) steht vor dem Fragezeichen. Wenn diese Bedingung zutrifft, wird der Teil vor dem Doppelpunkt "ausgeführt" (hier: '1'), wenn die Bedingung nicht zutrifft, der Teil hinter dem Doppelpunkt (hier: '0'). Wenn also das border-Attribut gleich Null ist, bekommt das border-Attribut die eins, also ein Pixel Breite, zugewiesen, in allen anderen Fällen wird das border-Attribut auf Null gesetzt.

Diese ganze Zuweisung ist in dem Javascript-Befehl "void" eingepackt, um zu vermeiden daß der Browser das Resultat der Zuweisung ('1' oder '0') im Browserfenster ausgibt.

Durch einfachen Austauch des zu suchenden Elementennamens kann man statt Tabellen z.B. alternativ allen Bildern einen Rahmen geben.

Bookmarklets haben sich seitdem der Artikel erschienen ist, zu einem beliebten Entwickler- und Komfort-Werkzeug entwickelt. Entsprechend weiter gediehen sind die Techniken um Bookmarklets zu Programmieren.

So ist zum Beispiel ein neuer Typus von Bookmarklets aufgetaucht, der mit externen, auf einer Website abgelegten Dateien arbeitet. Sei es das ein externes Stylesheet an die aktuelle Browserseite angehängt wird, um bestimmte HTML-Elemente sichtbar zu machen. Oder um via externen JavaScript-Dateien die Funktionalität der Bookmarklets zu erweitern.

Leider hat sich der Microsoft Internet Explorer 6 für Windows in eine negative Richtung weiterentwickelt. Er gestattet nur noch Bookmarks von einer Länge von bis zu 508 Zeichen, und schafft damit ein Größemlimit für Bookmarklets. Einige Bookmarklets sind fast doppelt so groß und funktionieren dadurch in IE6/Win nicht mehr korrekt.

Wie bereits oben erwähnt: Ich kann mich leider nicht erinnern von wessen Site ich das Bookmarklet habe.

Ich meine ich hätte es damals auf der Site von Jason Kottke http://www.kottke.org entdeckt. Aber eine Suche in seinem Archiv hat leider nichts ergeben.

Eine weitere Quelle könnte http://www.bookmarklets.com sein, aber auch hier habe ich dieses Border-Toggle nicht gefunden.

Auch eine Suche per Google war erfolglos. Dieses Script geistert in dieser oder ähnlicher Form auch von Zeit zu Zeit in diversen Mailinglisten. Also: Mea Culpa daß ich leider den Autor dieses Bookmarklet nicht finden konnte.

Die Bookmarklets auf der Gazingus und Çelik-Seiten habe ich dank Hinweisen von Jeffrey Zeldman gefunden.

[010305]
Update [011011]
weitere Links [020211]
weitere Bookmarklets [020925]
Addentum und weitere Links mit Hilfe von LANtastic [021115]