Jak osadzić widżet Javascript, który zależy od jQuery w nieznanym środowisku

Zobacz Jak zbudować widget www (używając jQuery) by 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

Co zrobić, jeśli chcesz również użyć niektórych wtyczek jQuery? Czy można zrobić sobie pojedynczy plik z minifikowanymi wersjami wtyczek, a także załadować te, jak poniżej? (Załadowany z S3, w tym konkretnym przykładzie.)

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

Zobacz Czy Mogę używać wielu wersji jQuery na tej samej stronie?

Czy można użyć dokumentu.write() aby opcjonalnie dodać skrypt jQuery do strony? To powinno zmusić jQuery do synchronicznego ładowania. Spróbuj tego:

<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>

Jeśli chcesz zrobić jQuery sprawdzić wewnątrz skryptu widget następnie wierzę, że następujące działa 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);
 }
})()

Wiem, że to stary temat... ale mam coś szybszego niż twój hack. Spróbuj w widgecie

"init": function()

To naprawi problem

Pobrałbym źródło jQuery i zmodyfikował obiekt jQuery na inny (jQueryCustom).

A następnie znajdź instancję, która ustawia symbol {[2] } jako obiekt jQuery i skomentuj tę procedurę.

(Sprawdź również drugą opcję, ponieważ nie jest źle, strona, na której będzie wykonywany widget, może mieć wersję jQuery starszą niż ta, której potrzebujesz).

EDIT: ja tylko sprawdziłem źródło. Wystarczy zastąpić jQuery innym ciągiem znaków (jQcustom na przykład). Następnie spróbuj skomentować ten wiersz:

_$ = window.$

I odwołujesz się do niestandardowego jQuery tak:

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