Ü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
}
siebzehn
quelle
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>
Daniel LeCheminant
quelle
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

Loren
quelle
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);
}
miksiii
quelle
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;
}
Prasanth Bendra
quelle
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>
chrisrth
quelle
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);
Tushar Shukla
quelle
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.

Ivijan Stefan Stipić
quelle
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();
Peter Song
quelle
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>
Michael
quelle
-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>
Sachin Kadam
quelle