mostrar - Cómo incrustar el widget Javascript que depende de jQuery en un entorno desconocido

jquery ui slide

Question

Estoy desarrollando un widget de JavaScript que depende de jQuery. El widget puede o no cargarse en una página que ya tiene jQuery cargado. Hay muchos problemas que surgen en este caso ...

1. Si la página web no tiene jQuery, debo cargar mi propia jQuery. Sin embargo, parece haber un problema de sincronización delicado al hacer esto. Por ejemplo, si mi widget se carga y se ejecuta antes de que jQuery termine de cargarse y ejecutarse, jQuery is not defined error de jQuery is not defined .

2. Si la página web tiene jQuery, generalmente puedo trabajar con ella. Sin embargo, si la versión de jQuery es antigua, me gustaría cargar la mía. Sin embargo, si cargué el mío, tengo que hacerlo de tal manera que no pise su $ variable. Si configuro jQuery.noConflict() y cualquiera de sus scripts depende de $ , entonces acabo de romper su página.

3. Si la página web utiliza otra biblioteca de JavaScript (por ejemplo, prototipo), también tenía que ser sensible a la variable $ del prototipo.

Debido a todo lo anterior, parece más fácil no depender de jQuery. Pero antes de ir por ese camino, lo que implicará sobre todo volver a escribir mi código de widget, primero quería pedir consejo.

El esqueleto básico de mi código, que incluye el error de tiempo y, a veces, $ bugs, sigue:

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

Mi widget tiene la siguiente estructura:

(function($) {
 var mywidget = {
  init: function() {
   ...
  }
 };
 $(document).ready(function() {
   mywidget.init();
 });
})(jQuery);

Si hay punteros o recursos para lograr un widget que pueda funcionar en todos los entornos mencionados, serán muy apreciados.

Answer 1

¿Puedes usar document.write () para agregar opcionalmente el script jQuery a la página? Eso debería obligar a jQuery a cargar sincrónicamente. Prueba esto:

<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 desea hacer la comprobación de jQuery dentro de su script de widgets, entonces creo que lo siguiente funciona entre navegadores:

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

Answer 2

¿Y si también quieres usar algunos plugins jQuery? ¿Es seguro hacerse un solo archivo con las versiones minificadas de los complementos, y también cargarlos, como se muestra a continuación? (Cargado de S3, en este ejemplo particular).

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

Answer 3

Consulte Cómo crear un widget web (usando jQuery) por 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

Answer 4

Después de revisar algunas respuestas y sugerencias, y encontrar algunos hackers jQuery útiles, terminé con algo como lo siguiente:

(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 = "/media/jquery.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script);
    }
})(window, document, "1.3", function($, jquery_loaded) {
    // Widget code here
});

Esto cargará jQuery si aún no está cargado y lo encapsula en la devolución de llamada para que no entre en conflicto con un jQuery preexistente en la página. También verifica si hay una versión mínima disponible o carga una versión conocida, en este caso, v1.3. Envía un valor booleano a la devolución de llamada (mi artilugio) sobre si se cargó o no jQuery en caso de que haya que hacer algún disparador. Y solo después de que se carga jQuery llama a mi widget, pasando jQuery en él.

Answer 5

Me gustaría descargar el código jQuery y modificar el objeto jQuery a otro (jQueryCustom).

Y luego encuentre la instancia que establece el símbolo $ como un objeto jQuery y comente esa rutina.

No sé cuán fácil o difícil podría ser, pero estoy seguro de que lo intentaré.

(Además, verifique su segunda opción, ya que no está mal, el sitio donde se ejecutará el widget, podría tener una versión de jQuery anterior a la que necesita).

EDITAR: Acabo de verificar la fuente. Solo tiene que reemplazar jQuery con otra cadena ( jQcustom por ejemplo). Luego, intente comentar esta línea:

_$ = window.$

Y haces referencia al jQuery personalizado así:

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

Answer 6

Sé que este es un tema viejo ... pero tengo algo más rápido que tu hack. Prueba tu widget

"init": function()

eso solucionará el problema

Answer 7

VER ¿Puedo usar múltiples versiones de jQuery en la misma página?