Comment intégrer le widget Javascript qui dépend de jQuery dans un environnement inconnu

Voir Comment créer un widget web (à l'aide de jQuery) par Alex Marandon.

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else { // Other browsers
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) { 
        // We can use jQuery 1.4.2 here
    });
}

})(); // We call our anonymous function immediately

et si vous voulez aussi utiliser des plugins jQuery? Est-il sûr de faire un seul fichier avec les versions miniaturisées des plugins, et aussi de les charger, comme ci-dessous? (Chargé à partir de S3, dans cet exemple particulier.)

(function(window, document, version, callback) {
  var j, d;
  var loaded = false;
  if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
    script.onload = script.onreadystatechange = function() {
        if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
            window.jQuery.getScript('http://mydomain.s3.amazonaws.com/assets/jquery-plugins.js', function() {
              callback((j = window.jQuery).noConflict(1), loaded = true);
              j(script).remove();
            });
        }
    };
    document.documentElement.childNodes[0].appendChild(script)
  }
})(window, document, "1.5.2", function($, jquery_loaded) {
  // widget code goes here
});

voir puis-je utiliser plusieurs versions de jQuery sur la même page?

pouvez-vous utiliser le document.write() pour éventuellement ajouter le script jQuery pour la page? Ça devrait forcer jQuery à se charger en même temps. Essayez ceci:

<script type="text/javascript" charset="utf-8">
// <![CDATA
 if (typeof jQuery === 'undefined') {
  document.write('<script src="{{ URL }}/jquery.js"><' + '/script>');
 }
// ]]>
</script>
<script type="text/javascript" src="{{ URL }}/widget.js"></script>

si vous voulez faire le jquery vérifier à l'intérieur de votre script widget alors je crois que les travaux suivants cross-browser:

(function() {
 function your_call($) {
  // your widget code goes here
 }
 if (typeof jQuery !== 'undefined') your_call(jQuery);
 else {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '{{ URL }}/jquery.js';
  var onload = function() {
   if (!script.readyState || script.readyState === "complete") your_call(jQuery);
  }
  if ("onreadystatechange" in script) script.onreadystatechange = onload;
  else script.onload = onload;
  head.appendChild(script);
 }
})()

je sais que c'est un vieux sujet... mais j'ai quelque chose de plus rapide que ton piratage. Essayez votre widget

"init": function()

qui va résoudre le problème

je vais télécharger la source jQuery et modifier l'objet jQuery à un autre (jQueryCustom).

et ensuite trouver l'instance qui définit le symbole $ comme un objet jQuery et commenter cette routine.

Je ne sais pas si c'est facile ou difficile, mais j'essaierais.

(aussi, cochez votre deuxième option, car il n'est pas mauvais, le site où le widget sera exécuté, pourrait avoir une version jQuery plus vieux que celui dont vous avez besoin).

EDIT: je viens de vérifier la source. Il suffit de remplacer jQuery par une autre chaîne ( jQcustom par exemple). Puis, essayez de commenter cette ligne:

_$ = window.$

et vous faites référence à la coutume jQuery comme ceci:

jQcustom("#id").attr(...)