vérifiez si jquery a été chargé, puis chargez-le si faux

Est-ce que quelqu'un sait comment vérifier si jquery a été chargé (avec javascript) puis le charger s'il n'a pas été chargé.

quelque chose comme

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

Peut-être quelque chose comme ça:

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

Évitez d'utiliser "if (! JQuery)" car IE renverra l'erreur: jQuery est 'indéfini'

Utilisez plutôt: 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>

Vous devrez également vérifier si le JQuery s'est chargé après l'avoir ajouté à l'en-tête. Sinon, vous devrez attendre l'événement window.onload, qui est plus lent si la page contient des images. Voici un exemple de script qui vérifie si le fichier JQuery a été chargé, car vous n'aurez pas la commodité de pouvoir utiliser $ (document) .ready (function ...

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

Méthode 1:

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

Méthode 2:

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

Si le fichier jquery.js n'est pas chargé, nous pouvons le forcer à le charger comme ceci:

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

Essaye ça :

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

Cela vérifie si jQuery est disponible ou non, sinon il en ajoutera un dynamiquement à partir du chemin spécifié.

Réf: Simuler un "include_once" pour jQuery

OU

include_once équivalent pour js. Réf: 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;
}

Même si vous pouvez ajouter une tête, cela peut ne pas fonctionner dans tous les navigateurs. C'est la seule méthode que j'ai trouvée pour fonctionner de manière cohérente.

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

Vous pouvez vérifier si jQuery est chargé ou non de plusieurs façons telles que:

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
}

Maintenant, après avoir vérifié si jQuery n'est pas chargé, vous pouvez charger jQuery comme ceci:

Bien que beaucoup de personnes aient répondu à cette partie dans cet article, mais toujours dans un souci d'exhaustivité du code

    // 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);

Ancien post mais j'ai fait une bonne solution ce qui est testé sur les lieux serval.

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

CODE:

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

Chez GitHub, c'est une meilleure explication mais généralement cette fonction vous pouvez ajouter n'importe où dans votre code HTML et vous initialiserez jquery s'il n'est pas déjà chargé.

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

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

J'utilise CDN pour mon projet et dans le cadre de la gestion de secours, j'utilisais le code ci-dessous,

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

Juste pour vérifier, j'ai supprimé la référence CDN et exécutez le code. C'est cassé et il n'est jamais entré dans la boucle if en tant que typeof jQuery vient en tant que fonction au lieu de non défini.

C'est à cause de l'ancienne version en cache de jquery 1.6.1 qui renvoie la fonction et brise mon code parce que j'utilise jquery 1.9.1. Comme j'ai besoin de la version exacte de jquery, j'ai modifié le code comme ci-dessous,

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