Hay veces que, cuando tenemos cargada una página web, nos interesa abrir la consola y trastear un poco, ya por cuestiones de depuración de errores, para probar cosas o simplemente por investigación. Gracias a la librería jQuery podemos hacer cosas fácil y rápido, pero si la página en cuestión no usa jQuery tendremos que cargarlo nosotros.
Vamos a usar un Bookmarklet para esto.
Si estamos en la consola y quisiésemos cargar jQuery, lo que haríamos es crear un elemento de tipo SCRIPT con createElement(), asignarle a la propiedad src la ruta del archivo Javascript que queremos cargar, por ejemplo de algún CDN con jQuery 1.11.2, y por último unimos este elemento al DOM al final de BODY (por ejemplo). Este sería el código: (he ido rápido porque es muy sencillo)
var s = document.createElement("script");
s.src="//code.jquery.com/jquery-1.11.2.min.js";
document.body.appendChild(s);
Nota: Quizás, antes de cargar jQuery, quieras comprobar si ya está cargado. Para eso ejecuta: jQuery().jquery en la consola y si está cargado te aparecerá la versión.
En el momento que se ejecute el appendChild(), comenzará la carga del archivo. Si quisiésemos algún tipo de aviso cuando esté cargado, o que se ejecute algo directamente, ya sabes que puedes usar la propiedad onload para asignarle una función (callback). Te pongo un ejemplo:
s.onload = function(){ alert("jQuery v"+jQuery().jquery+" cargado!"); };
Nota: Esta línea debe estar antes del appendChild() para que todo funcione bien.
Por supuesto si en vez de jQuery quisiésemos otra librería, cambiamos la propiedad src. Puedes consultar la lista de librerías disponibles que hay en cdnjs.com, la que hay en Google Developers, o la de Microsoft Ajax CDN . Estas son algunas de las más conocidas, pero hay muchas otras opciones.
Como resumen, te dejo aquí el código preparado para copiar y pegar directamente y con su correspondiente closure. Así podrás crear tu Bookmarklet:
Versión sin onload: (function(s){s=document.createElement("script");s.src="//code.jquery.com/jquery-1.11.2.min.js";document.body.appendChild(s);})();
Versión con onload: (function(f,s){s=document.createElement("script");s.src="//code.jquery.com/jquery-1.11.2.min.js";s.onload=f;document.body.appendChild(s);})(function(){alert("jQuery v"+jQuery().jquery+" cargado!")});
Nota: en color azul he puesto la URL del archivo que quieres cargar, por si lo quieres modificar. Y en color naranja he puesto la función que quieres que se ejecute cuando se cargue.
Seguramente sepas cómo se usan los Bookmarklets, y si es así, puedes dejar de leer o buscar qué otros Bookmarklets tengo en mi web. Pero si nunca has oido hablar de ellos, te lo cuento a continuación.
Aunque el código que te he pasado se puede ejecutar en la consola sin más, la idea de un Bookmarklet es que se puedan ejecutar sin tener que abrir la susodicha consola. Esto se puede conseguir usando la caja de localización del navegador. Ahí siempre se pone el nombre del protocolo seguido de dos puntos y luego la URL que queremos cargar. Por ejemplo: https://www.google.es, donde https es el protocolo y www.google.es es la URL.
Lo interesante es que podemos usar la palabra javascript como nombre para el protocolo y en vez de una url podemos poner el código javascript que queramos que se ejecute inmediatamente sobre la página que esté cargada. Por ejemplo: javascript:alert(«hola!»);
Nota: fíjate bien, porque si copias y pegas directamente, el navegador seguramente elimine la palabra javascript del principio. Esto será por algún asunto de seguridad.
Ahora que sabemos esto, también podremos crear un bookmark (favoritos/marcadores) y que cuando intentemos navegar hacia él, se ejecute el javascript. Eso es un Bookmarklet. Para crearlo:
- Ve a la sección de bookmarks/favoritos/marcadores de tu navegador
- Pulsa en añadir uno nuevo
- Pon de nombre algo descriptivo, por ejemplo «Mostrar saludo«
- Pon en la URL el protocolo y el código: javascript:alert(«hola!»);
- Guarda y ya está
