Rechercher  

Moitié signet, moitié application, les "bookmarklets" sont en fait des instructions Javascript stockées sous la forme d'un bookmark.
Ces quelques lignes de code (il est recommandé de ne pas dépasser 500 caractères) permettent à l'internaute d'accéder à une multitude de "services" qui enrichissent son navigateur.
Si certains bookmarklets ne s'utilisent qu'à l'aide d'une connexion Internet (interrogations de moteur de recherche par exemple), d'autres sont moins contraignants, tels que celui-ci qui permet de cacher / réafficher sous IE toutes les images de la page courante.

La syntaxe de base

Les bookmarklets sont un ensemble d'instructions Javascript. Pour se convaincre du possible enchaînement de celles-ci au sein d'un lien par exemple, on peut tester :

<A HREF="javascript:alert('Message 1');alert('Message 2')">Deux messages</a>

On obtient deux messages "alert" qui se suivent.

Il serait faux de croire qu'à partir du moment où la syntaxe "javascript:" est respectée, le reste du code n'est plus qu'une formalité. En effet, il faut s'assurer que le code Javascript ne renvoie rien au navigateur. Ici, nous avons un problème :

<A HREF="javascript:age=26">L'âge du capitaine</a>

Ce code Javascript renvoie la valeur 26, le navigateur affiche ce résultat dans le corps de la page. Celle-ci porte comme titre l'instruction Javascript...

Afin d'éviter cela, nous allons utiliser l'opérateur "void()" afin d'obtenir un retour "undefined" de la part de l'expression en question :

<A HREF="javascript:void(age=26)">L'âge du capitaine</a>

Ainsi le navigateur ne réagit pas et n'interrompt pas le bookmarklet. Si vous n'êtes pas sûr qu'une expression retourne une valeur, appliquez-lui l'opérateur "void()".

Le stockage des bookmarklets

Nous souhaitons maintenant stocker la bookmarklet suivante (rassemble toutes les images de la page au centre du navigateur) :

Les bookmarklets s'écrivent normalement d'une seule ligne; afin de rendre son code plus clair, nous l'avons "éclaté" :

javascript:i='';
for (j=0;j<document.images.length;j++)
{
     i+='<img src='+document.images[j].src+'><br>'
};
if(i!='')
{
     document.write('<center>'+i+'</center>');void(document.close())
}
else
{
     alert('Aucune image !')
}

Quelques mots sur l'algorithme utilisé ici :
"i" est une chaîne de caractères initialisée à "vide": tant qu'il y a des images sur la page on ajoute la chaîne "<img src='NOM_IMAGE'><br>" dans "i". S'il existe au moins une image, on affiche au centre de la page le contenu de la variable "i", c'est à dire chaque nom d'image suivi d'un saut de ligne.

Vous pouvez maintenant tester ce bookmarklet.
Vous souhaitez le conserver ? Deux principales solutions s'offrent à vous :
- La manière la plus simple de procéder est de faire glisser le lien du bookmarklet vers votre barre de liens (IE) / signets (Netscape) de votre navigateur.
- Placez votre curseur sur le lien ci-dessus, cliquez sur le bouton de droite, puis sélectionnez "Ajouter aux favoris".

Selon le navigateur utilisé, un message peut apparaître :
"Vous ajoutez un lien qui n'est pas sûr, voulez vous continuer ?", répondez par l'affirmative, rien à craindre dans le cadre de notre exemple.

Exemples et limitations

Une des limitations principales des bookmarklets réside dans leur couplage difficile avec les frames. Le script est alors exécuté dans la fenêtre "parent", ce qui peut poser un problème pour un bookmarklet conçu par exemple pour compter les liens d'une page.
Sur le site mentionné ci-dessous, il est indiqué si les bookmarklets présentés fonctionnent avec les frames ou pas.
Enfin, si les bookmarklets sont relativement faciles à écrire et destinés à être exécutés sur plusieurs plates-formes, seuls les plus simples d'entre eux ne nécessitent pas une réécriture selon le navigateur.

Afin de vous montrer l'étendue des possibilités des bookmarklets, voici quelques exemples à tester sur cette page. Ces exemples sont tirés de Bookmarklets.com, le site de l'inventeur des bookmarklets, Steve Kangas.

Attention, les liens suivants comprennent des modifications spécifiques pour le site JDNet Développeurs, si un de ces bookmarklets vous plaît, retrouvez-le sur le site cité ci-dessus et faites-le simplement glisser dans vos bookmarks.

- Liste des emails présents sur cette page.
- Nombre de liens sur la page.
- Modifie la couleur de fond de la page (IE / Netscape) (Syntaxe couleur : black, red...)
- Modifie la couleur du texte (IE)

Beaucoup d'autres bookmarklets existent sur le site de Steve Kangas, vous y trouverez notamment des modules de recherche reliés aux principaux moteurs de recherche.

[Arnaud Gadal 30 octobre 2001 , JDNet]

Les outils de développement dans le Guide des Solutions
e-business

L'encyclopédie JDNet Toutes les notions pratiques, techniques et économiques relatives à l'e-business.
>> Accès à la rubrique "Développement"

Comparez les prix Matériel, PDA, modems...
Les bonnes affaires de la high-tech avec Kelkoo.
>> Comparateur