Załaduj jQuery z Javascriptem i użyj jQuery

Dołączam bibliotekę jQuery do domeny za pomocą:

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

Jednak kiedy biegam:

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

Konsola zgłasza błąd:

Uncaught ReferenceError: jQuery is not defined

Jak dynamicznie ładować jQuery i używać go, gdy jest już w dom?

Jest tutaj działający JSFiddle z małym przykładem, który pokazuje dokładnie, czego szukasz (chyba że źle zrozumiałem twoją prośbę) : http://jsfiddle.net/9N7Z2/188/

Istnieje kilka problemów z tą metodą dynamicznego ładowania javascript. Jeśli chodzi o bardzo podstawowe frameworki, takie jak jQuery, prawdopodobnie chcesz je ładować statycznie, ponieważ w przeciwnym razie musiałbyś napisać cały framework ładujący JavaScript ...

Możesz użyć niektórych istniejących programów ładujących JavaScript lub napisać własne, obserwując, window.jQueryaby uzyskać definicję.

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

Pamiętaj tylko, że jeśli potrzebujesz obsługi naprawdę starych przeglądarek, takich jak IE8, programy loadobsługi zdarzeń nie działają. W takim przypadku musisz sondować, czy istnieje window.jQueryużycie funkcji powtórzone window.setTimeout. Istnieje działający JSFiddle z tą metodą tutaj: http://jsfiddle.net/9N7Z2/3/

Jest wielu ludzi, którzy już zrobili to, co trzeba. Sprawdź niektóre z istniejących frameworków JavaScript Loader, takich jak:

• https://developers.google.com/loader/ (nie jest już udokumentowane)
• http://yepnopejs.com/ (przestarzałe)
• http://requirejs.org/

Istnieje inny sposób dynamicznego ładowania jQuery ( źródło ). Możesz również użyć

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

Jest to uważane za złą praktykę document.write, ale ze względu na zakończenie dobrze o tym wspomnieć.

Zobacz Dlaczego document.write jest uważana za „złą praktykę”? z powodów. Pro jest to, że document.writenie blokować strony z ładowania innych assests, więc nie ma potrzeby, aby utworzyć funkcję zwrotną.

Strona internetowa Encosia poleca:

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

Ale nawet on przyznaje, że nie ma to porównania z robieniem następujących rzeczy, jeśli chodzi o optymalną wydajność:

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

Musisz uruchomić swój kod PO zakończeniu ładowania jQuery

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
} 

lub jeśli uruchamiasz go w funkcji asynchronicznej, której możesz użyć awaitw powyższym kodzie

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

Jeśli chcesz najpierw sprawdzić, czy jQuery już istnieje na stronie, spróbuj tego

Powodem, dla którego otrzymujesz ten błąd, jest to, że JavaScript nie czeka na załadowanie skryptu, więc po uruchomieniu

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

nie ma gwarancji, że skrypt jest gotowy (i nigdy nie będzie).

Nie jest to najbardziej eleganckie rozwiązanie, ale wykonalne. Zasadniczo możesz sprawdzać co 1 sekundę, czy reklama obiektu jQuery uruchamia funkcję po załadowaniu jej kodu. Dodałbym limit czasu (powiedzmy clearTimeout po jego uruchomieniu 20 razy), jak również, aby zatrzymać czekanie przed występowaniem w nieskończoność.

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

Korzystając z require.js , możesz zrobić to samo w bezpieczniejszy sposób. Możesz po prostu zdefiniować swoją zależność od jquery, a następnie wykonać kod, który chcesz, używając zależności podczas ładowania, bez zanieczyszczania przestrzeni nazw:

Generalnie polecam tę bibliotekę do zarządzania wszystkimi zależnościami od Javascript. Jest prosta i pozwala na efektywną optymalizację ładowania zasobów. Istnieją jednak pewne środki ostrożności, których możesz potrzebować podczas używania go z JQuery. Mój ulubiony sposób radzenia sobie z nimi jest wyjaśniony w tym repozytorium github i odzwierciedlony w poniższym przykładzie kodu:

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

Scenariusz:

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

Z konsoli DevTools możesz uruchomić:

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

Sprawdź dostępną wersję jQuery na https://code.jquery.com/jquery/ .

Aby sprawdzić, czy jest załadowany, zobacz: Sprawdzanie, czy jquery jest ładowane przy użyciu JavaScript .