Do not speak Spanish? Read this post in English.

Martes, 05 d mayo d 2009.

crear bookmarklets jquery

Un "bookmarklet" es un link que ejecuta código javascript. Estos links se usan para que los usuarios los añadan como "favoritos" especiales a sus navegadores. La idea es que al clickarlos se ejecute un código javacript en cualquier página que estén viendo y con ello conseguir distintos efectos.

El problema de los bookmarklets es que deben estar escritos en una línea, deben ser crossbrowser (funcionar en todos los navegadores) y al ser links no deberían ocupar más de 2600 caracteres.

Para facilitarme la vida lo que he hecho ha sido desarrollar un pequeño inicio de bookmarklet de 300 caracteres que se encarga de cargar en la página que está viendo el usuario jQuery. De esta forma las acciones que hagamos ya dispondrán de crossbrowser y de un sistema con el que "escribiendo menos" podamos hacer cualquier cosa en la página.

La forma es la siguiente:

javascript:(function(){
d=document;
s=d.createElement('script');
s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
d.getElementsByTagName('head')[0].appendChild(s);
var bto=setTimeout(function(){if(typeof jQuery!='undefined'){onLL();clearInterval(bto);}},500);
onLL=function(){
  /* 
  CÓDIGO JQUERY A LANZAR 
  */
}})()

Al final, lo único que tenemos que hacer es escribir nuestro código javascript con jquery, incluirlo dentro del script, incluir el script dentro de un link y por último quitar todos limpiar de saltos de línea el código final.

El resultado final, es que si queremos que un bookmarklet lance el siguiente código en jquery:

alert('El título de esta página es:'+ $('title').html());

Acabaremos generando un código como el siguiente:

<a href="javascript:(function(){d=document;s=d.createElement('script');s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';d.getElementsByTagName('head')[0].appendChild(s);var bto=setTimeout(function(){if(typeof jQuery!='undefined'){onLL();clearInterval(bto);}},500);onLL=function(){alert('El título de esta página es:'+ $('title').html());}})()" >Bookmarklet que dice el título de la página</a>

Que al incluirlo en nuestro html generaría un link que podemos ofrecer al usuario:

Temas Relacionados: jquery

Autor:

Anímate y deja tu comentario

Esto son experimentos, no preguntes ;) prueba metadescription Prueba title