2009-05-08 7 views
4

Je voudrais injecter jQuery dans une page en utilisant l'API Google AJAX bibliothèques, je suis venu avec la solution suivante:Injecter jQuery dans une page échoue lorsque vous utilisez l'API Google AJAX bibliothèques

http://my-domain.com/inject-jquery.js:

;((function(){ 

    // Call this function once jQuery is available 
    var func = function() { 
    jQuery("body").prepend('<div>jQuery Rocks!</div>'); 
    }; 

    // Detect if page is already using jQuery 
    if (!window.jQuery) { 
    var done = false; 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement("script"); 
    script.src = "http://www.google.com/jsapi"; 
    script.onload = script.onreadystatechange = function(){ 

     // Once Google AJAX Libraries API is loaded ... 
     if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) { 

     done = true; 

     // ... load jQuery ... 
     window.google.load("jquery", "1", {callback:function(){ 

      jQuery.noConflict(); 

      // ... jQuery available, fire function. 
      func(); 
     }}); 

     // Prevent IE memory leaking 
     script.onload = script.onreadystatechange = null; 
     head.removeChild(script); 
     } 
    } 

    // Load Google AJAX Libraries API 
    head.appendChild(script); 

    // Page already using jQuery, fire function 
    } else { 
    func(); 
    } 
})()); 

serait alors le script inclus dans une page sur un domaine distinct:

http://some-other-domain.com/page.html:

<html> 
    <head> 
    <title>This is my page</title> 
    </head> 
    <body> 
    <h1>This is my page.</h1> 
    <script src="http://my-domain.com/inject-jquery.js"></script> 
    </body> 
</html> 

Dans Firefox 3, je suis l'erreur suivante:

Module: 'jquery' must be loaded before DOM onLoad! jsapi (line 16) 

L'erreur semble être spécifique à l'API Google AJAX bibliothèques, comme je l'ai vu d'autres utilisent un bookmarklet jQuery pour injecter dans jQuery la page actuelle. Ma question:

  • Existe-t-il une méthode pour injecter l'API/jQuery des bibliothèques AJAX de Google dans une page quel que soit l'état onload/onready?

Répondre

14

Si vous l'injection, il est probablement plus facile de demander le script sans utiliser le chargeur google:

(function() { 
    var script = document.createElement("script"); 
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"; 
    script.onload = script.onreadystatechange = function(){ /* your callback here */ }; 
    document.body.appendChild(script); 
})() 
+0

méthode beaucoup plus directe, savez-vous s'il y a une URL statique sur les serveurs de Google que points à la dernière jQuery? –

+1

http://code.google.com/apis/ajaxlibs/documentation/ a les urls pour jQuery – artlung

+2

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min .js pour obtenir la dernière version de la version actuelle –

2

Je trouve ce poste après que nous ayons trouvé une autre solution. Donc, pour une raison quelconque, si vous ne pouvez pas utiliser la solution retenue, celle-ci semble fonctionner très bien:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    if (typeof jQuery == 'undefined') { 
     // jQuery hasn't been loaded... so let's write it into the head immediately. 
     document.write('<script type="text/javascript" src="/jquery-1.3.2.min.js"><\/script>') 
     } 
</script> 

Un problème avec la solution retenue est que vous êtes obligé de mettre tout votre code que vous voulez exécuter sur la page dans votre fonction de rappel. Donc tout ce qui a besoin de jQuery (comme les plugins) doit être appelé depuis cette fonction. ET, tous vos autres fichiers JS inclus qui requièrent jQuery dépendent du chargement de jQuery AVANT que tous les autres scripts ne soient déclenchés.

1

Je l'ai fait fonctionner !!!!! Je pensé à elle en regardant dans la cour de récréation de l'application ....

Voici l'emballage pour commencer à utiliser jquery .... une alerte dans la fonction pour voir fonctionner

google.load("jquery", "1.4.2"); 

function OnLoad(){ 
    $(function(){ 

    }); 
} 

google.setOnLoadCallback(OnLoad); 
1

Vous pouvez utiliser solution moins douloureuse pour injecter jquery (la dernière version stable disponible) à n'importe quelle page.

jQuerify - extension Chrome utilisé pour injecter jQuery (la dernière version stable disponible) dans une page Web (même HTTPS) »

Questions connexes