Завантажте jQuery за допомогою Javascript і використовуйте jQuery

Question 1

Я додаю бібліотеку jQuery до dom, використовуючи:

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

Однак коли я біжу:

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

Консоль повідомляє про помилку:

Uncaught ReferenceError: jQuery is not defined

Як я динамічно завантажую jQuery, а також використовую його, коли він перебуває у домі?

Question 2

Тут є робочий JSFiddle з невеликим прикладом, який демонструє саме те, що ви шукаєте (якщо я неправильно зрозумів ваш запит) : http://jsfiddle.net/9N7Z2/188/

Є кілька проблем із цим методом динамічного завантаження javascript. Коли справа стосується самих базових фреймворків, таких як jQuery, ви насправді хочете завантажити їх статично, бо в іншому випадку вам доведеться написати цілий фреймворк для завантаження JavaScript ...

Ви можете використовувати деякі з існуючих завантажувачів JavaScript або написати власні, переглядаючи, window.jQueryщоб визначитись.

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

Просто пам’ятайте, що якщо вам потрібна підтримка справді старих браузерів, таких як IE8, loadобробники подій не запускаються. У цьому випадку вам потрібно буде опитати, чи існує window.jQueryповторне використання window.setTimeout. Працює JSFiddle із цим методом тут: http://jsfiddle.net/9N7Z2/3/

Є багато людей, які вже зробили те, що вам потрібно зробити. Перевірте деякі існуючі фреймворки JavaScript Loader, наприклад:

~~https://developers.google.com/loader/~~ (більше не документально підтверджено)
~~http://yepnopejs.com/~~ (застаріле)
http://requirejs.org/

Question 3

Існує інший спосіб динамічного завантаження jQuery ( джерело ). Ви також можете використовувати

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

Це вважається поганою практикою для використання document.write, але для завершення добре про це згадати.

Див. Чому документ.write вважається "поганою практикою"? з причин. Про те , що document.writeдійсно блокує сторінки від завантаження інших assests, тому немає необхідності створювати функцію зворотного виклику.

Question 4

Веб-сайт Encosia рекомендує:

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

Але навіть він визнає, що це просто не порівнює з наступним, коли йдеться про оптимальну продуктивність:

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

Question 5

Вам потрібно запустити свій код ПІСЛЯ завершення завантаження 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
}

або якщо ви запускаєте його у функції асинхронізації, яку ви могли б використовувати awaitу наведеному вище коді

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

Якщо ви хочете спершу перевірити, чи вже існує jQuery на сторінці, спробуйте це

Question 6

Причиною цієї помилки є те, що JavaScript не чекає завантаження сценарію, тому під час запуску

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

немає гарантії, що сценарій готовий (і ніколи не буде).

Це не найелегантніше рішення, але воно дієве. По суті, ви можете перевіряти кожні 1 секунди, якщо об’єкт jQuery запускає функцію, коли вона завантажена разом із вашим кодом. Я б також додав тайм-аут (скажімо, clearTimeout після того, як його було запущено 20 разів), аби зупинити перевірку, яка не відбуватиметься необмежено довго.

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

Question 7

Використовуючи require.js ви можете зробити те ж саме більш безпечним способом. Ви можете просто визначити свою залежність від jquery, а потім виконати потрібний код, використовуючи залежність, коли вона завантажується, не забруднюючи простір імен:

Я зазвичай рекомендую цю бібліотеку для управління всіма залежностями від Javascript. Це просто і дозволяє ефективно оптимізувати завантаження ресурсів. Однак існують деякі запобіжні заходи, які вам, можливо, доведеться вжити, використовуючи його з JQuery. Мій улюблений спосіб боротьби з ними пояснюється в цьому репозиторії github і відображається в наступному прикладі коду:

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

Question 8

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>

Сценарій:

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

Question 9

За допомогою консолі DevTools ви можете запустити:

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

Перевірте доступну версію jQuery за адресою https://code.jquery.com/jquery/ .

Щоб перевірити, чи завантажено, див .: Перевірка завантаження jquery за допомогою Javascript .