compruebe si se ha cargado jquery, luego cárguelo si es falso


117

¿Alguien sabe cómo verificar si jquery se ha cargado (con javascript) y luego cárguelo si no se ha cargado?

algo como

if(!jQuery) {
    //load jquery file
}

1
¡Gracias por el aviso! con suerte, nunca tendrá que ser llamado. solo tratando de agregar un poco de redundancia
diecisiete

Respuestas:


166

Quizás algo como esto:

<script>
if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = "path/to/jQuery";
   document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

5
Tenga en cuenta que esto supone que el documento tiene un headelemento al que puede agregar un script
Daniel LeCheminant

1
@DanielLeCheminant buen punto en eso. ¿Y si lo fuera?( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( script );
pawelglow

3
@Pawel He visto algunas implementaciones que insertan el elemento antes / después de la primera etiqueta de secuencia de comandos, ya que sabe que tiene que haber una de esas.
Daniel LeCheminant

Creo que agregar una etiqueta de secuencia de comandos al cuerpo funciona en todos los navegadores.
Steven Lu

3
Entonces, en conclusión; el método más seguro será: (document.getElementsByTagName ('head') [0] || document.getElementsByTagName ('script') [0]) .appendChild (script); Dado que habrá al menos una instancia de etiqueta de secuencia de comandos.
Tormuto

106

Evite usar "if (! JQuery)" ya que IE devolverá el error: jQuery es 'indefinido'

En su lugar, use: if (typeof jQuery == 'undefined')

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

También deberá verificar si JQuery se ha cargado después de agregarlo al encabezado. De lo contrario, tendrá que esperar al evento window.onload, que es más lento si la página tiene imágenes. Aquí hay un script de muestra que verifica si el archivo JQuery se ha cargado, ya que no tendrá la comodidad de poder usar $ (document) .ready (function ...

http://neighborhood.org/core/sample/jquery/append-to-head.htm


¿Qué hay de script.onload = function() { alert('jQuery loaded!'); }? Funcionaría eso?
robsch

14

Método 1:

if (window.jQuery) {  
    // jQuery is loaded  
} else {
    // jQuery is not loaded
}

Método 2:

if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded
} else {
    // jQuery is loaded
}

Si el archivo jquery.js no está cargado, podemos forzar la carga así:

if (!window.jQuery) {
  var jq = document.createElement('script'); jq.type = 'text/javascript';
  // Path to jquery.js file, eg. Google hosted version
  jq.src = '/path-to-your/jquery.min.js';
  document.getElementsByTagName('head')[0].appendChild(jq);
}

8

Prueba esto :

<script>
  window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

Esto verifica si jQuery está disponible o no, si no, agregará uno dinámicamente desde la ruta especificada.

Ref: Simular un "include_once" para jQuery

O

include_once equivalente a js. Ref: https://raw.github.com/kvz/phpjs/master/functions/language/include_once.js

function include_once (filename) {
  // http://kevin.vanzonneveld.net
  // +   original by: Legaev Andrey
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: Michael White (http://getsprink.com)
  // +      input by: Brett Zamir (http://brett-zamir.me)
  // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Brett Zamir (http://brett-zamir.me)
  // -    depends on: include
  // %        note 1: Uses global: php_js to keep track of included files (though private static variable in namespaced version)
  // *     example 1: include_once('http://www.phpjs.org/js/phpjs/_supporters/pj_test_supportfile_2.js');
  // *     returns 1: true
  var cur_file = {};
  cur_file[this.window.location.href] = 1;

  // BEGIN STATIC
  try { // We can't try to access on window, since it might not exist in some environments, and if we use "this.window"
    //    we risk adding another copy if different window objects are associated with the namespaced object
    php_js_shared; // Will be private static variable in namespaced version or global in non-namespaced
    //   version since we wish to share this across all instances
  } catch (e) {
    php_js_shared = {};
  }
  // END STATIC
  if (!php_js_shared.includes) {
    php_js_shared.includes = cur_file;
  }
  if (!php_js_shared.includes[filename]) {
    if (this.include(filename)) {
      return true;
    }
  } else {
    return true;
  }
  return false;
}

2

Aunque tenga un encabezado adjunto, es posible que no funcione en todos los navegadores. Este fue el único método que encontré que funcionaba de manera consistente.

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
  document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"><\/script>');        
  } 
</script>

2
¿No está document.write MUY mal visto?
Carcigenicate

1

Puede verificar si jQuery está cargado o no de muchas maneras, como:

if (typeof jQuery == 'undefined') {

    // jQuery IS NOT loaded, do stuff here.

}


if (typeof jQuery == 'function')
//or
if (typeof $== 'function')


if (jQuery) {
    // This will throw an error in STRICT MODE if jQuery is not loaded, so don't use if using strict mode
    alert("jquery is loaded");
} else {
    alert("Not loaded");
}


if( 'jQuery' in window ) {
    // Do Stuff
}

Ahora, después de verificar si jQuery no está cargado, puede cargar jQuery así:

Aunque esta parte ha sido respondida por muchos en esta publicación, todavía responde por el bien de la integridad del código


    // This part should be inside your IF condition when you do not find jQuery loaded
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://code.jquery.com/jquery-3.3.1.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);

1

Publicación anterior, pero hice una buena solución que se prueba en lugares de servicio.

https://github.com/CreativForm/Load-jQuery-if-it-is-not-already-loaded

CÓDIGO:

(function(url, position, callback){
    // default values
    url = url || 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
    position = position || 0;

    // Check is jQuery exists
    if (!window.jQuery) {
        // Initialize <head>
        var head = document.getElementsByTagName('head')[0];
        // Create <script> element
        var script = document.createElement("script");
        // Append URL
        script.src = url;
        // Append type
        script.type = 'text/javascript';
        // Append script to <head>
        head.appendChild(script);
        // Move script on proper position
        head.insertBefore(script,head.childNodes[position]);

        script.onload = function(){
            if(typeof callback == 'function') {
                callback(jQuery);
            }
        };
    } else {
        if(typeof callback == 'function') {
            callback(jQuery);
        }
    }
}('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', 5, function($){ 
    console.log($);
}));

En GitHub hay una mejor explicación, pero generalmente esta función puede agregarla en cualquier lugar de su código HTML e inicializará jquery si aún no está cargado.


0
var f = ()=>{
    if (!window.jQuery) {
        var e = document.createElement('script');
        e.src = "https://code.jquery.com/jquery-3.2.1.min.js";
        e.onload = function () {
            jQuery.noConflict();
            console.log('jQuery ' + jQuery.fn.jquery + ' injected.');
        };
        document.head.appendChild(e);
    } else {
        console.log('jQuery ' + jQuery.fn.jquery + '');
    }
};
f();

tienes que agregar algún comentario sobre tu código para explicarlo.
Ebrahim Poursadeqi

0
<script>
if (typeof(jQuery) == 'undefined'){
        document.write('<scr' + 'ipt type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></scr' + 'ipt>');
}
</script>

-1

Estoy usando CDN para mi proyecto y, como parte del manejo de reserva, estaba usando el siguiente código,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
                if ((typeof jQuery == 'undefined')) {
                    document.write(unescape("%3Cscript src='/Responsive/Scripts/jquery-1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));   
                }
</script>

Solo para verificar, eliminé la referencia CDN y ejecuté el código. Está roto y nunca se ingresó en el bucle if, ya que typeof jQuery viene como función en lugar de indefinido.

Esto se debe a la versión anterior almacenada en caché de jquery 1.6.1 que devuelve la función y rompe mi código porque estoy usando jquery 1.9.1. Como necesito la versión exacta de jquery, modifiqué el código como se muestra a continuación,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
            if ((typeof jQuery == 'undefined') || (jQuery.fn.jquery != "1.9.1")) {
                document.write(unescape("%3Cscript src='/Responsive/Scripts/jquery-1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));   
            }
</script>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.