Controleren of jQuery is geladen met Javascript

Ik probeer te controleren of mijn JQuery-bibliotheek op mijn HTML-pagina is geladen. Ik ben aan het kijken of het werkt, maar er klopt iets niet. Dit is wat ik heb:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="/query-1.6.3.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
             if (jQuery) {  
               // jQuery is loaded  
               alert("Yeah!");
             } else {
               // jQuery is not loaded
               alert("Doesn't Work");
             }
          });
        </script>

Antwoord 1, autoriteit 100%

er klopt iets niet

Nou, u gebruikt jQuery om te controleren op de aanwezigheid van jQuery. Als jQuery niet is geladen, wordt $()zelfs helemaal niet uitgevoerd en wordt uw callback niet uitgevoerd, tenzij u een andere bibliotheek gebruikt en die bibliotheek dezelfde $()syntaxis.

Verwijder uw $(document).ready()(gebruik in plaats daarvan iets als window.onload):

window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
}

Antwoord 2, autoriteit 12%

Volgens dezelink:

if (typeof jQuery == 'undefined') {
    // jQuery IS NOT loaded, do stuff here.
}

er zijn er nog een paar in reacties op de link, zoals,

if (typeof jQuery == 'function') {...}
//or
if (typeof $== 'function') {...}
// or
if (jQuery) {
    alert("jquery is loaded");
} else {
    alert("Not loaded");
}

Ik hoop dat dit de meeste goede manieren dekt om dit voor elkaar te krijgen!!


Antwoord 3, autoriteit 6%

if ('undefined' == typeof window.jQuery) {
    // jQuery not present
} else {
    // jQuery present
}

Antwoord 4, autoriteit 5%

U kunt dit snel doen op het console-tabblad wanneer u uw webpagina inspecteert.

Bijvoorbeeld:

$ === jQuery

Als het trueretourneert, betekent dit dat het is geladen.


Antwoord 5, autoriteit 2%

Slechts een kleine wijziging die het probleem mogelijk kan oplossen:

window.onload = function() {
   if (window.jQuery) {  
       // jQuery is loaded  
       alert("Yeah!");
   } else {
    location.reload();
   }
}

Gebruik in plaats van $(document).Ready(function()window.onload = function().


Antwoord 6

LET OP: gebruik jQuery niet om uw jQuery te testen

Als u een code gebruikt die door andere gebruikers is verstrekt en als u het bericht op uw venster wilt weergeven en niet in de alertof console.log, Zorg er dan voor dat je javascript gebruikt en niet jQuery.

Niet iedereen wil alertof console.log

gebruiken

alert('jquery is working');
console.log('jquery is working');

De onderstaande code geeft het bericht niet weer
Omdat we jQuery gebruiken in de else(hoe wordt het bericht in godsnaam op je scherm weergegeven als je geen jQuery hebt)

if ('undefined' == typeof window.jQuery) {
    $('#selector').appendTo('jquery is NOT working');
} else {
    $('#selector').appendTo('jquery is working');
}

Gebruik in plaats daarvan JavaScript

if ('undefined' == typeof window.jQuery) {
    document.getElementById('selector').innerHTML = "jquery is NOT working";
} else {
    document.getElementById('selector').innerHTML = "jquery is working";
}

Antwoord 7

Als jQueryasynchroon wordt geladen, kun je wachten tot het is gedefinieerd en er elke keer op letten:

(function() {
    var a = setInterval( function() {
        if ( typeof window.jQuery === 'undefined' ) {
            return;
        }
        clearInterval( a );
        console.log( 'jQuery is loaded' ); // call your function with jQuery instead of this
    }, 500 );
})();

Deze methode kan worden gebruikt voor elke variabele, u wacht om te verschijnen.


Antwoord 8

Bijwerken:

Tegenwoordig gebruik ik dit in de productie en het werkt als een tierelier.

Zorg er echter voor dat u inderdaad jQuery laadt, anders kan het een oneindige lus veroorzaken. Ik raad aan om een teller toe te voegen & breken als je nodig hebt:

(async() => {
    console.log("waiting for jQuery");
    while(!window.hasOwnProperty("jQuery")) {
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    console.log("jQuery is loaded.");
})();

Oud antwoord:
U kunt controleren of het bestaat en, als het niet bestaat, het dynamisch laden.

function loadScript(src) {
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}
async function load(){
if (!window.jQuery){
    await loadScript(`https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js`);
}
console.log(jQuery);
}
load();

Antwoord 9

Je kunt gewoon typen
window.jQueryin console . Als het een functie (e,n) retourneert … Dan wordt bevestigd dat de jQuery is geladen en met succes werkt.


Antwoord 10

Een snelle manier is om een jQuery-opdracht uit te voeren in de ontwikkelaarsconsole. Druk in elke browser op F12 en probeer toegang te krijgen tot een van de elementen .

$("#sideTab2").css("background-color", "yellow");

Other episodes