Comment utiliser jQuery dans un bookmarklet ?

07/11/2007
WebDev et Design Allez aux commentaires

Voilà, maintenant que vous savez comment construire un bookmarklet, je vais vous expliquer comment utiliser jQuery à l'intérieur de votre bookmarklet !

Si vous n'êtes pas un hardcore codeur, une librairie tel que jQuery va grandement vous faciliter la tache dans le développement de vos bookmarklet !

Les étapes pour y arriver

Avant de vous balancer le code, je vais vous expliquer la méthode que j'ai utiliser pour l'intégration. Bon si ça vous saoule, vous pouvez tracer directement vers la fonction finale 😉

A/ Basiquement, je vais me servir de l'objet DOM de javascript. Dom permet de manipuler le code source d'une page, on peut insérer des noeuds, en supprimer ou en modifier.
Il y a quelques temps de celà, j'avais mis au point une méthode simple pour importer dynamiquement des fichier .js et .css. Je vais donc m'en servir pour importer la librairie jQuery.
Donc je vais créer un noeud dans lequel je mettrais le fichier .js, ensuite j'intègrerais ce noeud dans le noeud <head> de la page.

B/ Ensuite je vais faire une fonction qui va tenter d'utiliser une méthode propre à jquery. Cette fonction retournera "false" si je n'arrive pas à accèder à jQuery.

C/ Via une boucle, je vais vérifier à chaque dixième de seconde si on arrive à accèder à jQuery. Je me sers donc de la fonction créez au point B que j'interroge à intervalles réguliers pour voir si je peux enfin accèder à jQuery.
Dès que je reçoit une réponse autre que "false" de ma fonction, c'est que j'ai enfin accès à jQuery, j'arrête alors la boucle et j'exécute la fonction finale (point suivant)

D/ Je me créé un fonction dans laquelle je vais placer tout le code à exécuter une fois jQuery chargé. Donc dans cette fonction je vais pouvoir utiliser toutes les méthodes jQuery que je veux !

Voilà, vous ètes encore là ? Bon allez, voici le code finale ....

Le code final

void ((function(){
    /*=========================================================
     # A/ On integre jQuery dans la page
     =========================================================*/
    if (!document.getElementById("Ijquery")) {//on intègre jQuery uniquement si il n'est pas déjà present
        var noeud_js = document.createElement("script");//on cré un noeud 'Script'
        noeud_js.setAttribute("type", "text/javascript");//on defini le type text/javascript
        noeud_js.setAttribute("id", "Ijquery");//on lui donne une Id pour la verification
        noeud_js.setAttribute("src", "http://code.jquery.com/jquery-latest.pack.js");//on indique la source du fichier
        document.getElementsByTagName("head")[0].appendChild(noeud_js);//on integre le nouveau noeud dans la page
    }
    /*=========================================================
     # B/ On verifie que jQuery répond corectement
     =========================================================*/
    function jquery_loaded(){
        var temp = "false";
        try {//on essais d'acceder à une fonction de jQuery
            temp = $("body").text();
        }
        catch (erreur) {//et si la fonction jQuery de repond pas
            temp = "false";
        }
        return temp;//temp vaudra 'false' si jQuery ne repond pas
    }
    /*=========================================================
     # C/ On va determiner à partir de quand jQuery est disponible
     =========================================================*/
    function verif_loaded(){//cette fonction sera executé tant que jquery ne sera pas dispo
        var temp = jquery_loaded();
        if (temp != "false") {//si jQuery repond, on arrète la boucle de verification et on execute code()
            clearInterval(interval);
            code();
        }
    }
    var interval = window.setInterval(verif_loaded, 100);//on verifie si jQuery est disponible toute les 1/10 de seconde
    /*=========================================================
     # D/ La fonction code() sera appelée une fois que
     jQuery repondra
     =========================================================*/
    function code(){
        // Loading jQuery fini !
        // Mettez tout le code à executer ici ...
    }
})())
 

Voilà, j'ai commenté et mis en correspondance avec mes explications précédentes. Donc vous n'avez plus qu'à placer votre code javascript à l'intérieur de la fonction code().
Vous pouvez évidement changer l'url du fichier .js a chargé, ici je le récupère directement sur les serveurs de jQuery 😀

La méthode plus compact fournie par Jay Salvat

/**
 * @author Jay Salvat
 */
void ((function(){
    if (typeof(jQuery) != 'function') {
        var noeud_js = document.createElement('script');
        noeud_js.setAttribute('src', 'http://code.jquery.com/jquery-latest.pack.js');
        document.getElementsByTagName('head')[0].appendChild(noeud_js);
    }
   
    function verif_loaded(){
        if (typeof(jQuery) == 'function') {
            clearInterval(interval);
            code();
        }
    }
   
    var interval = window.setInterval(verif_loaded, 100);
   
    function code(){
   
    }
})())

Conclusions

Rappelez vous que vous devrez ensuite tout compresser (et éventuellement encoder) pour pouvoir en faire un bookmarklet.
L'importation peut ne pas fonctionner sous safari. Testé avec succès sous Firefox 2, IE7 et Opera 9.

Liens utiles

-----

Articles relatifs

  • Bien, mais ça oblige à faire un chargement externe avant de lancer le script. Tu me diras avec le cache ça va vite.

  • k-ny

    Oui le chargement est assez light 😉

  • Jay Salvat

    Hi K-ny !

    Merci pour ta méthode qui m’a fait gagner du temps. Je pense qu’elle peut être allégée. Voici ma version :

    void ((function(){
    if (typeof(jQuery) != ‘function’) {
    var noeud_js = document.createElement(« script »);
    noeud_js.setAttribute(« src », « http://code.jquery.com/jquery-latest.pack.js »);
    document.getElementsByTagName(« head »)[0].appendChild(noeud_js);
    }

    function verif_loaded(){
    if (typeof(jQuery) == ‘function’) {
    clearInterval(interval);
    code();
    }
    }

    var interval = window.setInterval(verif_loaded, 100);

    function code(){

    }
    })())

    J’espère que le code passera dans le commentaire. Si ce n’est pas le cas, n’hésite pas à tout effacer.

  • Jay Salvat

    De rien de rien, j’en attendais pas tant 🙂

  • k-ny

    @Jay

    Rahhhhh, j’ai vraiment pas penser à utiliser le typeof ! Effectivement ça fait économiser pas mal de lignes ! J’ai ajouté ton code au billet, merci pour le partage 😉