sprawdź, czy jquery zostało załadowane, a następnie załaduj je, jeśli jest fałszywe

Czy ktoś wie, jak sprawdzić, czy jquery zostało załadowane (za pomocą javascript), a następnie załadować je, jeśli nie zostało załadowane.

coś jak

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

Może coś takiego:

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

Unikaj używania „if (! JQuery)”, ponieważ IE zwróci błąd: jQuery jest „niezdefiniowane”

Zamiast tego użyj: 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>

Musisz również sprawdzić, czy JQuery zostało załadowane po dołączeniu go do nagłówka. W przeciwnym razie będziesz musiał poczekać na zdarzenie window.onload, które jest wolniejsze, jeśli strona zawiera obrazy. Oto przykładowy skrypt, który sprawdza, czy plik JQuery został załadowany, ponieważ nie będziesz mieć wygody korzystania z $ (dokument) .ready (funkcja ...

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

Metoda 1:

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

Metoda 2:

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

Jeśli plik jquery.js nie jest załadowany, możemy wymusić jego załadowanie w następujący sposób:

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

Spróbuj tego :

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

Sprawdza, czy jQuery jest dostępne, czy nie, jeśli nie, doda je dynamicznie z określonej ścieżki.

Ref: Symuluj „include_once” dla jQuery

LUB

odpowiednik include_once dla js. Odniesienie: 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;
}

Nawet jeśli masz dołączoną głowę, może nie działać we wszystkich przeglądarkach. To była jedyna metoda, którą znalazłem konsekwentnie.

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

Możesz sprawdzić, czy jQuery jest załadowany na wiele sposobów, takich jak:

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
}

Teraz po sprawdzeniu, czy jQuery nie jest załadowane, możesz załadować jQuery w następujący sposób:

Chociaż wiele osób odpowiedziało na tę część w tym poście, ale nadal odpowiadam ze względu na kompletność kodu

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

Stary post, ale zrobiłem dobre rozwiązanie co jest testowane na miejscach serval.

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

KOD:

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

Na GitHub jest lepsze wyjaśnienie, ale ogólnie tę funkcję możesz dodać w dowolnym miejscu w kodzie HTML i zainicjujesz jquery, jeśli nie jest jeszcze załadowany.

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>

Używam CDN do mojego projektu i w ramach obsługi awaryjnej używałem poniższego kodu,

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

Aby to zweryfikować, usunąłem odniesienie do CDN i wykonałem kod. Jest zepsuty i nigdy nie jest wprowadzany, jeśli pętla jako typ jQuery pojawia się jako funkcja zamiast undefined.

Dzieje się tak z powodu buforowanej starszej wersji jQuery 1.6.1, która zwraca funkcję i psuje mój kod, ponieważ używam jquery 1.9.1. Ponieważ potrzebuję dokładnej wersji jQuery, zmodyfikowałem kod jak poniżej,

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