Ajout de fichiers .js externes en utilisant DOM puis appel de la fonction à partir du fichier .js

Question

J'essaye de créer un bookmarklette. Je veux minimiser la taille du javascript dans le bookmarklette afin que je puisse maintenir la majeure partie du code dans un fichier externe. Mon but est de ...
1) Ajouter un fichier .js externe à la page.
2) Appelez une fonction à partir de ce fichier .js externe.
3) Avoir cette fonction ajouter des fichiers .js supplémentaires à la page (une source JQuery par exemple).

Voici mon code pour le numéro 1. Cela fonctionne.

javascript:function bmksMain(){var script=document.createElement('script');script.src='http://localhost/bmks/bmksBmkMain.js';scriptObj=document.body.appendChild(script);}bmksMain(); 

Voici le contenu du fichier .js.

function bmksBmkMaster(){ 
     alert('debug1'); 
    var script, object; 
    script = document.createElement('script'); 
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'; 
    object = document.body.appendChild(script); 
     alert('debug2'); 
    $("body").hide(); 
     alert('debug3'); 
} 
bmksBmkMaster(); 

Quand je coller le code minisignet dans une barre d'adresse et execute, debugs 1 et 2 feu, puis il meurt. Ensuite, si j'exécute à nouveau sans actualiser la page, les trois débogages se déclenchent et tout fonctionne parfaitement. Puis-je ne pas inclure un .js et l'utiliser dans la même fonction/script? Quelque chose de funky se passe ...

Merci d'avance!

(testé dans IE7 et Chrome dernière)

Answer 1

Vérifiez l'article jQuerify Bookmarklet et ses successeurs pour un exemple de la façon dont cela doit être fait. (Par exemple, en prenant l'identifiant $ global est pas sage.)

Answer 2

Voici un moyen croix navigateur pour charger des scripts:

function loadScript(scriptUrl, callback){ 
    var script = document.createElement('script'); 
    script.type='text/javascript'; 
    script.onload = function(){ 
     callback(); 
      callback = function(){}; 

    } 
    script.onreadystatechange = function() { 
     if(script.readyState === 'loaded' || script.readyState === 'complete'){ 
      callback(); 
        callback = function(){}; 
     } 
    } 
    script.src = scriptUrl; 
    document.getElementsByTagName('head').item(0).appendChild(script); 
} 

Vous pouvez l'utiliser comme ceci:

loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', function(){ 
    //hide body 
});