8 votes

Transformer JavaScript en marque-page ou en bookmarklet ?

J'ai créé un script qui affiche les mots de passe au survol, tout comme Windows 8 sur un clic des yeux.

J'ai mis en place cette fonctionnalité en utilisant JavaScript avec le code suivant.

function text(){this.type="text"}function password(){this.type="password"}function addHandlers(){var e=false;var t=document.evaluate("//input[@type='password']",document,null,6,null);for(var n=t.snapshotLength-1,r;r=t.snapshotItem(n);n--){if(!e){r.addEventListener("mouseover",text,false);r.addEventListener("mouseout",password,false)}else{r.addEventListener("focus",text,false);r.addEventListener("blur",password,false)}}}addHandlers()

Désolé pour le code JavaScript compressé, mais je veux créer un favori ou un bookmarklet qui exécute ce script...

J'ai essayé :

javascript:(mycode);

Mais ça n'a pas marché...

10voto

humanityANDpeace Points 692

Pour résoudre votre problème spécifique, j'ai réussi à faire fonctionner votre code JavaScript sans aucune erreur dans cette version :

javascript:(function(){function text(){this.type="text"};function password(){this.type="password"};function addHandlers(){var e=false;var t=document.evaluate("//input[@type='password']",document,null,6,null);for(var n=t.snapshotLength-1,r;r=t.snapshotItem(n);n--){if(!e){r.addEventListener("mouseover",text,false);r.addEventListener("mouseout",password,false)}else{r.addEventListener("focus",text,false);r.addEventListener("blur",password,false)}}};addHandlers();alert("bookmarklet loaded");})();

Pour voir si votre code fonctionne, j'ai ajouté un alert("bookmarklet loaded"); à la fin du bookmarklet. Vous pouvez donc essayer et devriez - puisque j'ai testé sur Firefox 17 - voir comme résultat l'apparition d'une boîte de message. Si votre code fonctionne ou ne fonctionne pas, je ne peux pas le dire, mais bien sûr ce n'était pas la question.

Il y a quelques choses à garder à l'esprit ou à prendre en compte pour rendre la transformation du code JavaScript dans les balises plus facile à adopter pour un bookmarklet

  • Dans le code JavaScript normal, un saut de ligne peut séparer deux commandes. Les bookmarklets sont sur une seule ligne donc substituez le saut de ligne par un point-virgule ;.

Un exemple ici

Prenons un exemple. Ayons deux extraits de code source avec deux instructions :

var anumber=1
var atext="hallo"

Lorsque vous mettez tout sur une ligne (= remplacez le saut de ligne par des espaces), vous obtiendriez tout d'abord ceci :

var anumber=1 var atext="hallo"

Ce n'est plus un code JavaScript valide. Si vous voulez combiner deux instructions en une seule ligne, vous devez séparer/délimiter les deux instructions en utilisant un point-virgule comme ceci :

var anumber=1; var atext="hallo"
  • Enveloppez tout votre code dans une sorte de fermeture comme ceci :
    javascript:(function(){ [...votre code ici...] })();

Il y a de nombreux sites web pour investiguer la solution. Comme ici.

6voto

marc.guenther Points 715

Vous étiez en fait assez proche. Il vous suffit de le mettre de cette façon:

javascript:(function(){mycode})();

Dans votre exemple, vous pouvez essayer ceci:

javascript:(function(){function text(){this.type="text"};function password(){this.type="password"};function addHandlers(){var e=false;var t=document.evaluate("//input[@type='password']",document,null,6,null);for(var n=t.snapshotLength-1,r;r=t.snapshotItem(n);n--){if(!e){r.addEventListener("mouseover",text,false);r.addEventListener("mouseout",password,false)}else{r.addEventListener("focus",text,false);r.addEventListener("blur",password,false)}}};addHandlers()})();

Veuillez faire attention aux points-virgules lorsque vous minifiez votre code, vous en manquiez quelques-uns.

SistemesEz.com

SystemesEZ est une communauté de sysadmins où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres sysadmins, poser vos propres questions ou résoudre celles des autres.

Powered by:

X