Załaduj jQuery z JavaScript i używać jQuery

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 gdy uruchamiam:

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

konsoli zgłasza błąd:

Uncaught ReferenceError: jQuery is not defined

Jak załadować jQuery dynamicznie, jak również użyć go, gdy jest już w domenie?

Źródło

2012-04-11 ThomasReggi

Czy istnieje powód jesteś chcąc to zrobić vs bardziej zoptymalizowany sposób? –

Niektóre odpowiedzi w tym pytaniu mogą ci pomóc - http://stackoverflow.com/questions/7474354/include-jquery-in-the-javascript-console – mrtsherman

@Scott Tak. Mam aplikację, w której podczas instalacji ładuje się zarówno jquery, jak i skrypt. Muszę załadować jquery w skrypcie, aby jquery nie łamało motywów użytkowników. Muszę warunkowo załadować javascript na pewną stronę w obrębie ich motywu. Proszę mi tylko zaufać. – ThomasReggi

Tam pracuje JSFiddle z małym przykład tutaj, że pokazuje dokładnie to, czego szukasz (chyba, że ja źle żądania): http://jsfiddle.net/9N7Z2/188/

Jest kilka problemów związanych z tą metodą dynamicznego ładowania javascript. Jeśli chodzi o podstawowe struktury, takie jak jQuery, prawdopodobnie chcesz je załadować statycznie, ponieważ w przeciwnym razie musiałbyś napisać całą ramkę ładowania JavaScript ...

Możesz użyć niektórych z istniejących programów ładujących JavaScript lub napisz własne, aby uzyskać zdefiniowane window.jQuery.

// Anonymous "self-invoking" function 
(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); 
})();

Wystarczy pamiętać, że jeśli trzeba wspierać naprawdę starych przeglądarek, jak IE8, load obsługi zdarzeń nie wykonać. W takim przypadku musisz sondować na obecność numeru window.jQuery, używając powtórnego window.setTimeout. Jest tutaj działający JSFiddle z tą metodą: http://jsfiddle.net/9N7Z2/3/

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

Źródło

2012-04-11 20:28:13

To rozwiązanie działa, z wyjątkiem WordPress. W jaki sposób można to zmienić, aby załadować jQuery do innego obiektu? –

@Sanuel Jackson Z Wordpress powinieneś użyć funkcji 'wp_enqueue_script()', aby poprawnie dołączyć jQuery. Dokumentacja: http://codex.wordpress.org/Function_Reference/wp_enqueue_script Więcej informacji tutaj: http: // digwp.com/2009/06/w tym-jquery-in-wordpress-the-right-way/lub here: http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ –

Tak, mówiłem, że powyższy kod nie działa w Wordpressie, ponieważ ładuje jQuery asynchronicznie. Nawet jeśli ten skrypt jest załadowany na samym dole strony (tuż przed zamknięciem html), jQuery nie jest w pełni "zainicjowany", a zatem nie widzi załadowanego jQuery, i kontynuuje ładowanie i wykonywanie wywołania zwrotnego. Po załadowaniu buga się o inne rzeczy, które zostały załadowane asynchronicznie, zależały od załadowania jQuery w inny sposób (np. $, JQuery, itp.) Lub zależne od innej wersji jQuery. –

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>

Źródło

2012-04-11 20:28:03 coder

Trudną częścią jest uruchomienie skryptu * po * skrypt jest załadowany ... I dlaczego kiedykolwiek skrypt byłby niezdefiniowany! ?? –

Encosia's website recommends:

<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 to po prostu nie ma porównania do robienia co następuje, 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>

Źródło

2012-04-11 20:29:04

Mogę załadować tylko jeden javascript. To by znaczyło, że musiałbym załadować google jsapi dynamicznie, a następnie z tego jquery obciążenia? Wydaje się zbędne w moim przypadku użycia. – ThomasReggi

Oto, co robi program ładujący jQuery. Odwołujesz się do programu ładującego, a program ładujący wstrzykuje jQuery do dokumentu. –

Powodem są coraz tego błędu jest to, że JavaScript nie jest oczekiwanie na skrypcie być załadowany, więc po uruchomieniu

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

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

To nie jest najbardziej eleganckie rozwiązanie, ale funkcjonalne. Zasadniczo możesz sprawdzać co 1 sekundę, jeśli reklama obiektu jQuery uruchamia funkcję, gdy jest ona załadowana kodem. Dodałbym limit czasu (np. ClearTimeout po jego uruchomieniu 20 razy), a także zatrzymanie sprawdzania 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);

Źródło

2012-04-11 20:50:19 marteljn

Używając 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, gdy jest on ładowany bez zanieczyszczania przestrzeni nazw:

Generalnie polecam tę bibliotekę do zarządzania wszystkimi zależnościami w Javascript. Jest to proste i pozwala na wydajną optymalizację ładowania zasobów. Jednak istnieje pewna liczba precautions, którą możesz potrzebować, gdy używasz go z JQuery. Moim ulubionym sposobem radzenia sobie z nimi jest wyjaśnione w tym github repo i odbite przez Poniższy przykładowy kod:

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

Źródło

2012-04-11 22:11:41 txominpelu

Nie ma innego sposobu, aby załadować jQuery dynamicznie (source). Można 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 uważany za złą praktyką jest stosowanie document.write, lecz ze względu na zakończenie dobrze jest go wymienić.

Zobacz Why is document.write considered a "bad practice"? z powodów. pro polega na tym, że document.write nie blokuje twojej strony przed ładowaniem innych assestów, więc nie ma potrzeby tworzenia funkcji zwrotnej.

Źródło

2014-02-05 15:41:51

Przeczytałem dokument, z którym się łączyłeś, a dla mojego przypadku użycia ładowania starszej biblioteki jQuery dla IE8, użycie document.write wydaje się być w porządku. Jak na razie działa dobrze. – Alan

To jest najprostszy najprostszy sposób na zrobienie tego. Czy wystąpiłby problem z wykonaniem tego na początku dość dużego skryptu, który jest oddzielnym plikiem JS? To zbyt dobre, żeby się poddać. –

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

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 
}

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

Źródło

2017-02-02 22:11:25 aljgom

Załaduj jQuery z JavaScript i używać jQuery

Odpowiedz

Powiązane problemy