Laden Sie jQuery mit Javascript und verwenden Sie jQuery

Ich hänge die jQuery-Bibliothek an den Dom an, indem ich:

 var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

Wenn ich jedoch renne:

jQuery(document).ready(function(){...

Die Konsole meldet den Fehler:

Uncaught ReferenceError: jQuery is not defined

Wie lade ich jQuery dynamisch und verwende es, sobald es sich im Dom befindet?

Hier gibt es eine funktionierende JSFiddle mit einem kleinen Beispiel, das genau zeigt, wonach Sie suchen (es sei denn, ich habe Ihre Anfrage falsch verstanden) : http://jsfiddle.net/9N7Z2/188/

Es gibt einige Probleme mit dieser Methode zum dynamischen Laden von Javascript. Wenn es um sehr grundlegende Frameworks wie jQuery geht, möchten Sie diese wahrscheinlich statisch laden, da Sie sonst ein ganzes JavaScript-Ladeframework schreiben müssten ...

Sie können einige der vorhandenen JavaScript-Loader verwenden oder eigene schreiben, indem Sie darauf achten window.jQuery, dass sie definiert werden.

// Immediately-invoked function expression
(function() {
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    script.onload = function() {
        var $ = window.jQuery;
        // Use $ here...
    };
    document.getElementsByTagName("head")[0].appendChild(script);
})();

Denken Sie daran, dass Ereignishandler nicht ausgeführt werden , wenn Sie wirklich alte Browser wie IE8 unterstützen loadmüssen. In diesem Fall müssten Sie nach der Existenz der window.jQuerywiederholten Verwendung fragen window.setTimeout. Es gibt eine funktionierende JSFiddle mit dieser Methode hier: http://jsfiddle.net/9N7Z2/3/

Es gibt viele Leute, die bereits getan haben, was Sie tun müssen. Schauen Sie sich einige der vorhandenen JavaScript Loader-Frameworks an, z.

• https://developers.google.com/loader/ (nicht mehr dokumentiert)
• http://yepnopejs.com/ (veraltet)
• http://requirejs.org/

Es gibt eine andere Möglichkeit, jQuery dynamisch zu laden ( Quelle ). Sie könnten auch verwenden

document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');

Es wird als schlechte Praxis angesehen document.write, aber um es zu vervollständigen, ist es gut, es zu erwähnen.

Siehe Warum wird document.write als "schlechte Praxis" angesehen? aus den Gründen. Die Pro ist , dass document.writeBlock ist Ihre Seite von anderen assests geladen, so gibt es keine Notwendigkeit , eine Callback - Funktion zu erstellen.

Die Website von Encosia empfiehlt:

<script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the 
  //  latest version matching that partial revision pattern 
  //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
  google.load("jquery", "1.7.2");

  google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
  });
</script>

Aber selbst er gibt zu, dass es in Bezug auf die optimale Leistung nicht mit Folgendem vergleichbar ist:

    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script>
    <script type="text/javascript" src="scripts.js"></scripts>
</body>
</html>

Sie müssen Ihren Code ausführen, nachdem jQuery vollständig geladen wurde

var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = function(){
    // your jQuery code here
} 

oder wenn Sie es in einer asynchronen Funktion ausführen, können Sie es awaitim obigen Code verwenden

var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
await script.onload
// your jQuery code here

Wenn Sie zuerst überprüfen möchten, ob jQuery bereits auf der Seite vorhanden ist, versuchen Sie dies

Der Grund, warum Sie diesen Fehler erhalten, ist, dass JavaScript nicht darauf wartet, dass das Skript geladen wird, also wenn Sie es ausführen

jQuery(document).ready(function(){...

Es gibt keine Garantie dafür, dass das Skript bereit ist (und es niemals sein wird).

Dies ist nicht die eleganteste Lösung, aber praktikabel. Im Wesentlichen können Sie alle 1 Sekunde überprüfen, ob das jQuery-Objekt eine Funktion ausführt, wenn es mit Ihrem Code geladen ist. Ich würde auch ein Timeout hinzufügen (sagen wir clearTimeout, nachdem es 20 Mal ausgeführt wurde), um zu verhindern, dass die Prüfung auf unbestimmte Zeit erfolgt.

var jQueryIsReady = function(){
    //Your JQuery code here
}

var checkJquery = function(){
    if(typeof jQuery === "undefined"){
        return false;
    }else{
        clearTimeout(interval);
        jQueryIsReady();
    }
}
var interval = setInterval(checkJquery,1000);

Mit require.js können Sie dasselbe auf sicherere Weise tun. Sie können einfach Ihre Abhängigkeit von jquery definieren und dann den gewünschten Code unter Verwendung der Abhängigkeit ausführen, wenn sie geladen wird, ohne den Namespace zu verschmutzen:

Ich empfehle diese Bibliothek generell, um alle Abhängigkeiten von Javascript zu verwalten. Es ist einfach und ermöglicht eine effiziente Optimierung der Ressourcenbelastung. Es gibt jedoch einige Vorsichtsmaßnahmen, die Sie möglicherweise treffen müssen, wenn Sie es mit JQuery verwenden. Meine bevorzugte Art, mit ihnen umzugehen, wird in diesem Github-Repo erklärt und im folgenden Codebeispiel wiedergegeben:

<title>jQuery+RequireJS Sample Page</title>
   <script src="scripts/require.js"></script>
   <script>
   require({
       baseUrl: 'scripts',
       paths: {
           jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
       },
       priority: ['jquery']
    }, ['main']);
    </script>

HTML:

<html>
  <head>

  </head>
  <body>

    <div id='status'>jQuery is not loaded yet.</div>
    <input type='button' value='Click here to load it.' onclick='load()' />

  </body>
</html>   

Skript:

   <script>

        load = function() {
          load.getScript("jquery-1.7.2.js");
          load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it.
        }

        // dynamically load any javascript file.
        load.getScript = function(filename) {
          var script = document.createElement('script')
          script.setAttribute("type","text/javascript")
          script.setAttribute("src", filename)
          if (typeof script!="undefined")
          document.getElementsByTagName("head")[0].appendChild(script)
        }

        </script>

Über die DevTools- Konsole können Sie Folgendes ausführen:

document.getElementsByTagName("head")[0].innerHTML += '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>';

Überprüfen Sie die verfügbare jQuery-Version unter https://code.jquery.com/jquery/ .

Informationen zum Überprüfen, ob es geladen ist, finden Sie unter: Überprüfen, ob jquery mit Javascript geladen ist .