Lesezeichen

Lesezeichen (Favoriten, Bookmarks) mit Javascript anlegen

Als kleines Service bieten viele Webseiten die Möglichkeit, ihre Adresse als Lesezeichen (Favorit) anzulegen. Diese Seite informiert über einige Möglichkeiten dazu.
Javascript ECMAScript für HTML und XML
Lesezeichen Nur mit Genehmigung !
Firefox Methode   window.sidebar.addPanel()
Microsoft Methode   window.external.AddFavorite()
Opera HTML-Link mit Attribut rel
Browser-Weiche  

Lesezeichen

Genehmigung

Prinzipiell wäre es kein Problem, die Adresse einer Webseite mit Javascript direkt in die Bookmark-Liste einzutragen, die jeder gängige Browser bietet. Das wäre jedoch geradezu eine Einladung für Spammer.
• Deshalb verlangen alle Browser vor der Eintragung zumindest eine ausdrückliche Bestätigung.

Kein Standard

Leider gibt es bis heute keine einheitliche Möglichkeit zum Anlegen von Bookmarks mit Javascript.
Einige Browser-spezifische Beispiele werden auf dieser Seite Live demonstriert.

Firefox (Gecko-Familie)

Firefox Firefox und die übrigen Browser der Gecko-Familie haben sich praktisch von der Möglichkeit verabschiedet, Bookmarks mit Javascript herzustellen.

• Man geht davon aus, dass mittlerweile alle AnwenderInnen wissen, wie man Bookmarks anlegt.
• Der mögliche Schaden durch Spammer wiegt schwerer als der gering eingeschätzte Nutzen.
• Deshalb werden solche Funktionen auch in Zukunft vermutlich nicht mehr eingeführt. 		Die aktuellen Versionen bieten die beiden Funktionen addPanel und addPersistentPanel
Mit diesen Funktionen lassen sich zwar - wie erwartet - Bookmarks herstellen. Wenn man ein auf diese Weise hergestelltes Lesezeichen anklickt, dann wird die betreffende Webseite auch geöffnet - jedoch im Sidebar (schmales Fenster am linken Rand, von den meisten AnwenderInnen nicht verwendet) und nicht - wie erwartet - im normalen Browser-Fenster.
Der Sinn (und der Unterschied) dieser Funktionen ist unklar, sie sind auch sehr bescheiden dokumentiert.

Im Internet findet man viele Anfragen und wenige Angebote von Lösungen. Jene Lösungen, die überhaupt funktionieren, beruhen auf der Funktion addPanel und arbeiten daher nicht wie erwartet.

addPanel

Die Methode addPanel des Objekts window.sidebar bietet die Möglichkeit zum Anlegen von Bookmarks mit dem Sidebar als Verweis-Ziel.
Sie erwartet 3 Argumente:
• Titel des Links (String), hier aus dem Titel der Webseite entnommen.
• Link-Adresse (URL-String), hier ebenfalls automatisch übernommen.
• Beschreibung ? (customize, String, hier leer). 		Javascript Funktion
function bookmark_firefox() {
var title = document.title;
var url = location.href;
var descr = "";
window.sidebar.addPanel(title,url,descr);
}
Live-Anwendung mit HTML (für diese Rahmen-Seite leicht modifiziert):
Zu den
<a href="javascript:bookmark_firefox">
Favoriten
</a>

Error-Handler mit try

Wenn Javascript Fehler voraussehbar auftreten werden (z.B. weil ein Browser die Funktion nicht beherrscht), dann sollte man den Fehler abfangen.
• Der catch-Block wird (nur dann) ausgeführt, wenn im try-Block ein Fehler auftrat. Damit werden non-Standard Funktionen und Methoden wie addPanel abgesichert: 		Ein potentieller Fehler und seine Verarbeitung:
try{
window.sidebar.addPanel(title,url,"");
}
catch(e) {
alert("Dieser Fehler ist aufgetreten:\n"+e);
}
An Stelle der eigenen Fehler-Meldung (alert) kann man ↓ Methoden für andere Browser ausprobieren.
Rahmen
Wenn eine Webseite in einen Rahmen (<frame>) eingebettet ist, dann kompliziert sich der Fall: Man muss die Rahmen-Seite adressieren, und danach die gewünschte Seite in einen ihrer Rahmen laden.
Die Details übersteigen das Niveau einer einfachen Einführung.
Bei Interesse sehen sie sich den Quelltext dieses Webs an, der (wie jeder Quelltext) offen zugänglich ist.

Microsoft
AddFavorite
Die Methode AddFavorite des Objekts window.external bietet die Möglichkeit zum Anlegen von Bookmarks.
Sie erwartet 2 Argumente:
• Titel des Links (String), hier aus dem Titel der Webseite entnommen.
• Link-Adresse (URL-String), ebenfalls automatisch übernommen.

♣ Tipp: Sichern sie die Methode in einem try-Block (voriges Kapitel) gegen die Verwendung durch andere Browser ab.

Auch in diesem Fall muss die Funktion für Rahmen-Seiten etwas modifiziert werden.
Javascript-Funktion:
function bookmark_msie() {
var title = document.title;
var url = location.href;
window.external.AddFavorite(url,title);
}

Live-Anwendung mit HTML (für diese Rahmen-Seite leicht modifiziert):
Zu den
<a href="javascript:bookmark_msie">
Favoriten
</a>

Opera
Link-Attribut   rel
Opera scheint derzeit keine direkte Möglichkeit zum Anlegen von Bookmarks mit Javascript zu bieten.
Als Alternative wird ein HTML-Link mit dem ansonsten kaum verwendeten Attribut rel="sidebar" verwendet.
• Diese Methode wird auch von ↑ Firefox unterstützt, öffnet des angelegte Lesezeichen jedoch nur im Sidebar.
Live-Anwendung mit HTML (für diese Rahmen-Seite leicht modifiziert) für Opera und Firefox :
Zu den
<a href="http://...bookmark.htm" title="Favoriten" rel="sidebar" target="_blank">
Favoriten
</a>
Der M$IE Browser ignoriert das Attribut rel, öffnet den Link und ersetzt damit die aktuelle Seite. Das wird etwas entschärft, wenn man das Attribut target="_blank" einsetzt. In diesem Fall wird der Link zwar (unerwünscht) geöffnet, die aktuelle Seite bleibt jedoch erhalten. Die anderen Browser ignorieren in diesem speziellen Fall das Attribut target und reagieren wie erwünscht.
Server-Programme Um den HTML-Link automatisch herzustellen, verwendet man am einfachsten eine Server-Programmiersprache wie Perl, PHP, Python ...
Dazu braucht man jedoch einen Webserver, der auch die betreffende Sprache versteht (bzw. einen Provider mit diesem Angebot).
Ereignis (event) onload
Eine Javascript-Lösung kommt auch ohne Webserver und Server-Programme aus, ist jedoch etwas aufwändiger:
Dsa Programm wird erst nach dem vollständigen Laden der Webseite gestartet, d.h. ausgelöst durch das Ereignis (event) onload
♦ Details zu Javascript Event-Handlern.

DOM-Methoden

Nach dem Laden kann man mit DOM-Methoden beliebige Elemente in eine bestehende Webseite einfügen - z.B. einen HTML-HyperLink nach dem gezeigten Beispiel.
In diesem Web werden DOM-Methoden häufig angewendet, u.a. zur automatischen Herstellung der ↓ Fußzeilen (grau) jeder Webseite, in denen auch je ein Bookmark-Link enthalten ist.
♦ Details zu DOM-Methoden
Das Attribut rel wird neuerdings mit ganz anderen Absichten auf HTML-Links angewendet (Beispiel rechts).
Der Wert nofollow wird von normalen Browsern ignoriert und nur von den Analyse-Programmen (Spiders, Robots) der Suchmaschinen befolgt. 		Dieser Hyperlink funktioniert:
Zum Web von
<a href='http://www.microsoft.com' rel='nofollow'>
Microsoft
</a>
Der Link wird von Suchmaschinen nicht verfolgt oder zur Bewertung verwendet, was dem Ziel-Unternehmen jedoch nichts ausmachen dürfte.

Browser-Verzweigung
Es ist leider sehr mühsam, mit Javascript zwischen den Browsern und ihren Versionen zu unterscheiden. Hier wird eine pragmatische Lösung demonstriert:

Browser-Name

Man kann zwecks Verzweigung den Browser-Namen, bei Bedarf auch die Version ermitteln.
Je nach Ergebnis kann man eine der 3 angegebenen Methoden zum Anlegen eines Bookmark-Links verwenden.

• Vorteil: Die Methode ist einfach und klar.
• Nachteil: Die zahlreichen weniger bekannten oder verwendeten Browser & Versionen werden nicht berücksichtigt. 		Die Live-Daten ihres Browsers:
navigator.appName = ?
navigator.appVersion = ?
navigator.userAgent = ?

Anwendungs-Beispiel:
var n=navigator.appName.substr(0,1);
if(n=="N") {
// Firefox & Gecko-Familie ('Netscape')
}
else if(n=="M") {
// MSIE
}
else if(n=="O") {
// Opera
}

Objekte und Methoden

Man kann zur Verzweigung mehrere Varianten ausprobieren. Jede Methode wird in einen try-Block gesetzt:

• Die einzelnen Methoden zur Lösung eines Problems werden der Reihe nach ausprobiert.
• Die Methoden sind sortiert, beginnend mit der am häufigsten anzutreffenden oder mit der bevorzugten Methode.
• Wenn eine Methode funktioniert (ok=1), dann wird keine andere mehr ausprobiert.
• Ansonsten wird jede angebotene Methode probiert.
• Allfällige Fehlermeldungen werden unterdrückt.

• Vorteil: Unabhängig von Art und Version des Browsers
• Nachteil: Hilft nicht, wenn ein Browser keine der Varianten beherrscht, oder - wie Firefox in diesem speziellen Fall - die Methode beherrscht, das Ergebnis jedoch unbrauchbar ist.
function set_bokkmark() {
var title = document.title;
var url = location.href;
var ok=0;
// 1.Methode
try {
window.external.AddFavorite(url,title);
ok=1;
}
catch(e) {}
// 2.Methode
if(!ok) {
try {
window.sidebar.addPanel(title,url,"");
ok=1;
}
catch(e) {}
}
// naechste Methode usw.
}
Die zuletzt demonstrierte Methode wird in diesem Web immer dann bevorzugt, wenn es (leider) noch keine einheitliche Lösung gibt.
Das Programm muss nicht geändert werden, wenn ein Browser eine der Methoden 'dazulernt'. 		Live-Test:
Zu den
<a href="javascript:set_bookmark()">
Favoriten
</a>

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript