Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : JavaScript avanzado :
Bookmarklets: código JavaScript en una URL
1. ¿Qué es un bookmarklet?
Una de las funcionalidades más estándar de un navegador es el almacenamiento de las URLs preferidas del usuario, para su posterior recuperación e invocación de forma rápida. Paralelamente, la mayoría de los navegadores (IE, Netscape y Opera, por ejemplo) permiten la ejecución de código JavaScript introducido directamente en la barra de direcciones de la ventana de navegación. La combinación de estas 2 funcionalidades nos lleva directamente a los bookmarklets: bookmarks que ejecutan código JavaScript.
La idea es simple, pero potente. Si una URL puede contener exclusivamente código JavaScript, y una URL puede guardarse en mi sección de favoritos o bookmarks, ¿por qué no vamos a poder guardar un bookmark que ejecute código JavaScript?.
2. El protocolo javascript:
Para entender el concepto de bookmarklet vamos a poner un sencillo ejemplo. Teclee la siguiente línea en la barra de direcciones de su navegador:
javascript:alert('JavaScript en una URL')
Si pulsa enter observará cómo el navegador le muestra un alert box como el siguiente:
Lo único que hemos hecho es invocar la ejecución de código JavaScript desde la barra de direcciones del navegador. Para ello, debemos seguir unas normas sencillas, pero esenciales:
- El código JavaScript debe ser precedido por la palabra javascript: que le indica al navegador que lo que sigue no es una URL, sino código a ejecutar.
- El código JavaScript debe estar escrito en una sóla línea, separando cada sentencia por un ;.
- Las sentencias no deben devolver ningún valor (o lo que es lo mismo, deben
devolver undefined).
En caso contrario, el navegador, tras ejecutar el código,
mostrará una página en blanco con el valor devuelto
por la sentencia. Algunas funciones estándar de JavaScript
devuelven undefined (por ejemplo, alert()).
Pero otras devuelven un valor concreto (por ejemplo, confirm()).
En caso de que alguna de las sentencias de nuestro código
devuelva un valor, la precederemos del operador void(),
que evalúa la expresión que recibe como argumento, y devuelve undefined.
Prueba con estos 2 ejemplos:
URL con JavaScript que devuelve un valor distinto de undefined
- Si el código JavaScript va a formar parte de un enlace, utilizaremos siempre comillas simples en todas las sentencias que lo requieran, y dejaremos las comillas dobles para el código HTML del enlace. Por ejemplo:
<a href="javascript:alert('¡Hola!')">
- El tamaño del código JavaScript que se puede incluir en una URL debe ser reducido. Conviene no sobrepasar los 500 caracteres. Las líneas de código largas suelen generar errores en los navegadores, por lo que conviene reducir el tamaño de los bookmarlets.
3. Ejecución de un bookmarklet
La mayoría de los navegadores disponen de una barra de botones configurable por el usuario, para tener acceso directo a las URLs preferidas de los usuarios. Por ejemplo, en el Internet Explorer esta barra recibe el nombre de Barra de direcciones. En la siguiente imagene mostramos la Barra de direcciones configurada para acceder directamente a las URLs de JavaScript, El Código y Administración.
Lo que hace de los bookmarklets una poderosa herramienta es precisamente la posibilidad de asignarlos, como URLs que son, a los botones de esta barra de direcciones. De este modo, la ejecución de una pieza de código JavaScript sobre cualquier página que estemos viendo es tan sencilla como pulsar en el botón correspondiente.
La forma más sencilla de entenderlo es con un ejemplo. El siguiente código JavaScript permite ver todas las imágenes de un documento en otra ventana del navegador.
pagina = ''
for (indice=0; indice < document.images.length; indice++) {
pagina += '<img src='+document.images[indice].src+'><br>'
}
if(pagina != '') {
document.write('<center>' + pagina + '</center>')
void( document.close() )
} else {
alert('¡No hay imagenes!')
}
Para convertirlo en un buen bookmarklet, sólo tenemos que reducirlo al máximo (eliminando los espacios que sobran) y poner todas las sentencias en una sóla línea (separadas por el caracter ;). El resultado es el siguiente:
javascript:pagina='';for(indice=0;indice<document.images.length;indice++){ pagina+='<img src='+document.images[indice].src+'><br>'}; if(pagina!=''){document.write('<center>'+pagina+'</center>'); void(document.close())}else{alert('No images!')}
Ahora sólo tenemos que copiar nuestra pieza de código JavaScript e incluirla como si de una URL se tratara en el menú de favoritos del navegador, y si queremos tenerla accesible más fácilmente, en la Barra de direcciones. También puedes incluirlo como vículo en una URL de tus páginas. Esto te puede ayudar a probar los scripts que vayas desarrollando. Por ejemplo, el código anterior se puede probar pulsando el siguiente enlace:
Ver las imágenes del documento
4. Limitaciones
La mayoría de los bookmarklets funcionan correctamente en cualquier página web por la que se esté navegando. Las limitaciones fundamental está en el reducido tamaño que debe tener el código. Además, la mayoría de los bookmarklets no funcionarán en páginas con marcos.
Los marcos o frames son un obstáculo para los bookmarklets. Cuando en la ventana actual de navegación la página está formada por múltiples marcos, el script se ejecutará en la ventana padre, carente de contendio real (es sólo la página que crea la estructura de marcos). Por ello, el resultado no será el esperado en la mayoría de los casos.
