L'injection de jQuery dans une page échoue lors de l'utilisation de l'API Google AJAX Libraries

StackOverflow https://stackoverflow.com/questions/840240

Question

Je souhaite injecter jQuery dans une page à l'aide de l'API Google AJAX Libraries. Nous avons développé la solution suivante:

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();
  }
})());

Le script serait alors inclus dans une page d'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, l'erreur suivante apparaît: 

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

L’erreur semble être spécifique à l’API Google AJAX Libraries, car j’ai vu d’autres personnes utiliser un bookmarklet jQuery pour injecter jQuery dans la page en cours. Ma question:

  • Existe-t-il une méthode permettant d'injecter l'API / jQuery des bibliothèques AJAX de Google dans une page, quel que soit l'état sur l'état de charge / actif?
Était-ce utile?

La solution

Si vous vous injectez, 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 );
})()

Autres conseils

J'ai trouvé ce post après avoir trouvé une solution différente. Donc, pour une raison quelconque, si vous ne pouvez pas utiliser la solution acceptée, celle-ci semble bien fonctionner: 

<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 acceptée est que vous êtes obligé de mettre tout le 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é à partir de cette fonction. ET, tous vos autres fichiers JS inclus nécessitant jQuery dépendent du chargement de jQuery AVANT le déclenchement de tous les autres scripts.

Je l'ai fait fonctionner !!!!! Je l'ai compris en regardant dans la cour des applications ....

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

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

function OnLoad(){
    $(function(){

    });
}

google.setOnLoadCallback(OnLoad);

Vous pouvez utiliser une solution moins pénible pour injecter jquery (la dernière version stable disponible) sur n’importe quelle page.

jQuerify - Extension de chrome utilisée pour injecter jQuery (la dernière version stable disponible) ) dans une page Web (même HTTPS) "

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top