Zum Inhalt gehen.

Menü



Valid XHTML 1.0 Strict
Valid CSS
RSS der Elektroniker Bude abonnieren

Bookmarklets

Bookmarklets sind kleine JavaScript-Programme, welche so formatiert worden sind, dass man sie als Linkadresse eines Favoriten speichern kann. So kann man die Funktion des Bookmarklets durch Anklicken des Favoriten starten.

Hier gibt es die Bookmarklets, die ich programmiert habe, weitere Bookmarklets oder Tipps zum Verwenden bekommst Du auf Toms Seite(externer Link).

Suchmaschinen Begriffe hervorheben

Wer die Google Toolbar kennt, der kennt auch die kleine hilfreiche Funktion, mit der die aktuellen Suchbegriffe in der Seite hervorgehoben werden können. Wenn man die Toolbar aber nicht mag, dann kann das kleine Bookmarklet diese Funktion ersetzen.

Ist man über Suchergebnisse auf eine Seite gekommen kann dieses Bookmarklet aus dem Refferer ermitteln, welches die Suchbegriffe waren und diese Farblich in der Webseite hinterlegen.

  1. javascript:(function(){
  2.   if(/[q|p]=(.+?)&/.exec(document.referrer+'&')){
  3.     Wter = decodeURIComponent(RegExp.$1);
  4.   }
  5.   else{
  6.     Wter = prompt('Suchbegriffe:','');
  7.   }
  8.   Wter = Wter.split(/[ +]/);
  9.   for(i=0; i<Wter.length; i++){
 10.     if(!(Wter[i].length==0)){
 11.       Szwi = document.getElementsByTagName('body')[0].innerHTML.split(/(<.+?>)/);
 12.       Send = '';
 13.       for(j=0; j<Szwi.length; j++){
 14.         if(/<.+?>/.exec(Szwi[j])){
 15.           Send = Send + Szwi[j];
 16.         }
 17.         else{
 18.          Send = Send + Szwi[j].replace(RegExp('('+Wter[i]+')','ig'),'<span style=\'background-color:#ee0;\'>$1</span>');
 19.         }
 20.       }
 21.       document.getElementsByTagName('body')[0].innerHTML = Send;
 22.     }
 23.   }
 24. })();

Bookmarklet

Beschreibung

In Zeile 2 wird überprüft, ob in dem Referrer ein GET Parameter q oder p enthalten ist (Google oder Yahoo Suche). Wenn dies der Fall ist, dann werden die Wörter in Wter gespeichert (3). Ansonsten wird in Zeile 6 eine Benutzerdefinierte Eingabe in Wter gespeichert.
In 8 werden die Wörter getrennt und in das Array Wter gespeichert. In Zeile 9 wird mit Hilfe einer For-Schleife das Array mit den Suchbegriffen durchlaufen.
Um nur Wörter zu markieren, die angezeigt werden und nicht in Adress-, Alt- oder Titel-Feldern Veränderungen zu machen, wird der gesamte Body-Quelltext in ein Array zerlegt. Unter jedem Index befindet sich entweder ein HTML-Tag, oder der Angezeigte Text. In der For-Schleife aus Zeile 13 wird dieses Array durchlaufen, und je nach dem, ob es ein HTML-Tag (Zeile 15) oder Inhalt (Zeile 18) ist entsprechend behandel.

Bekannte Probleme: Frames, Textareas, nicht valider Quelltext, Windows Internet Explorer!

Zu große Bilder verkleinern

In einigen Foren kommt es immer mal wieder vor das eingebundene Bilder so groß sind, dass sie das Layout des Forums sprengen. Das Problem ist dabei häufig, dass der Text der Postings nicht mehr ordentlich gelesen werden kann, weil der Anzeigebereich manchmal 3000 Pixel und breiter wird. Der Text wird zu einer einzigen langen Zeile wie zum Beispiel in diesem Thread(externer Link). Dieses Bookmarklet verkleinert alle großen Bilder auf 680px Breite mit nur einem Klick.

  1. javascript:(function(){
  2.   WMax = 680;
  3.   WBild = document.getElementsByTagName('img');
  4.   for (i in WBild){
  5.     if(WBild[i].width > WMax){
  6.       Whoch = parseInt(WBild[i].height * (WMax / WBild[i].width));
  7.       WBild[i].width = WMax;
  8.       WBild[i].height = Whoch;
  9.       WBild[i].style.width = WMax + 'px';
 10.       WBild[i].style.height = Whoch + 'px';
 11.     }
 12.   }
 13. })();

Bookmarklet

Beschreibung

Zunächst wird in Zeile 2 die maximale Bildgröße festgelegt, dieser Wert kann für jeden Bildschirm angepasst werden. Bilder, größer als dieser Wert werden verkleinert. Dazu beginnt in Zeile 4 eine Schleife, die alle img-Elemente durchläuft. Die folgende If-Abfrage sorgt dafür, dass nur zu große Bilder im folgenden neu skaliert werden. Dazu wird die passende Höhe ausgerechnet, so dass das Seitenverhältnis erhalten bleibt. Damit es auf jeder Webseite passt werden sowohl die normalen Werte für das Bild als auch die Stylsheet-Werte gesetzt.

Erstellt im September 08 erweitert im April 2010