Überprüfen Sie, ob jquery geladen wurde, und laden Sie es, wenn false


117

Weiß jemand, wie man prüft, ob jquery geladen wurde (mit Javascript) und es dann lädt, wenn es nicht geladen wurde.

etwas wie

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

1
Danke für die Warnung! hoffentlich muss es eigentlich nie aufgerufen werden. Ich versuche nur, ein bisschen Redundanz hinzuzufügen
siebzehn

Antworten:


166

Vielleicht so etwas:

<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
Beachten Sie, dass dies voraussetzt, dass das Dokument ein head
Skriptelement enthält

1
@ DanielLeCheminant guter Punkt dazu. Was wäre, wenn es wäre( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( script );
pppglowacki

3
@Pawel Ich habe einige Implementierungen gesehen, die das Element vor / nach dem ersten Skript-Tag einfügen, da Sie wissen, dass es eines davon geben muss.
Daniel LeCheminant

Ich glaube, dass das Anhängen eines Skript-Tags an body in allen Browsern funktioniert.
Steven Lu

3
Also abschließend; Die sicherste Methode ist: (document.getElementsByTagName ('head') [0] || document.getElementsByTagName ('script') [0]) .appendChild (script); Da wird es mindestens eine Instanz des Skript-Tags geben.
Tormuto

106

Vermeiden Sie die Verwendung von "if (! JQuery)", da der IE den Fehler zurückgibt: jQuery ist 'undefiniert'

Verwenden Sie stattdessen: 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>

Sie müssen auch überprüfen, ob die JQuery geladen wurde, nachdem Sie sie an den Header angehängt haben. Andernfalls müssen Sie auf das Ereignis window.onload warten, das langsamer ist, wenn die Seite Bilder enthält. Hier ist ein Beispielskript, das prüft, ob die JQuery-Datei geladen wurde, da Sie nicht die Möglichkeit haben, $ (document) .ready (function ...

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


Was ist mit script.onload = function() { alert('jQuery loaded!'); }? Funktioniert das?
Robsch

14

Methode 1:

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

Methode 2:

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

Wenn die Datei jquery.js nicht geladen ist, können wir das Laden wie folgt erzwingen:

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

Versuche dies :

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

Dies prüft, ob jQuery verfügbar ist oder nicht. Wenn nicht, wird dynamisch eine aus dem angegebenen Pfad hinzugefügt.

Ref: Simulieren Sie ein "include_once" für jQuery

ODER

include_once-Äquivalent für 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

Auch wenn Sie möglicherweise einen Kopf anhängen, funktioniert dies möglicherweise nicht in allen Browsern. Dies war die einzige Methode, mit der ich konsequent arbeiten konnte.

<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
Ist nicht document.write HIGHLY verpönt?
Carcigenicate

1

Sie können auf viele Arten überprüfen, ob jQuery geladen ist oder nicht, z.

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
}

Nachdem Sie überprüft haben, ob jQuery nicht geladen ist, können Sie jQuery wie folgt laden:

Obwohl dieser Teil von vielen in diesem Beitrag beantwortet wurde, antwortet er der Vollständigkeit halber immer noch


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

Alter Beitrag, aber ich habe eine gute Lösung gefunden, was an mehreren Orten getestet wird.

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

Bei GitHub gibt es eine bessere Erklärung, aber im Allgemeinen können Sie diese Funktion an einer beliebigen Stelle in Ihrem HTML-Code hinzufügen und jquery initialisieren, wenn sie noch nicht geladen ist.


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

Sie müssen einen Kommentar zu Ihrem Code hinzufügen, um ihn zu erklären.
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

Ich verwende CDN für mein Projekt und als Teil der Fallback-Behandlung habe ich den folgenden Code verwendet:

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

Um dies zu überprüfen, habe ich die CDN-Referenz entfernt und den Code ausgeführt. Es ist kaputt und wird nie eingegeben, wenn die Schleife als Typ von jQuery als Funktion kommt anstelle von undefiniert kommt.

Dies liegt an der zwischengespeicherten älteren Version von jquery 1.6.1, die die Funktion zurückgibt und meinen Code beschädigt, weil ich jquery 1.9.1 verwende. Da ich eine genaue Version von jquery benötige, habe ich den Code wie folgt geändert:

<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>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.