Загрузите jQuery с помощью Javascript и используйте jQuery

я добавляю библиотеку 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 динамически, а также использовать его, как только он находится в dom?

400   7  

7 ответов:

здесь есть рабочий 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, например:

102  
2018-07-23 14:09:04

существует другой способ динамической загрузки jQuery (источник). Вы также можете использовать 

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

считается плохой практикой использовать document.write, но ради завершения стоит упомянуть об этом.

посмотреть почему документ.писать считается "плохой практикой"? по причинам. Элемент pro это document.write блокирует вашу страницу от загрузки других активов, поэтому нет необходимости создавать функцию обратного вызова.

7  
2017-05-23 15:03:02

сайт 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>
6  
2012-04-11 23:29:04

вам нужно запустить свой код после завершения загрузки 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
}

Если вы хотите проверить, если jQuery уже существует на странице, попробовать этой

3  
2017-05-23 13:31:15

причина, по которой вы получаете эту ошибку, заключается в том, что JavaScript не ждет загрузки скрипта, поэтому при запуске 

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

нет гарантии, что скрипт готов (и никогда не будет).

это не самое элегантное решение, но выполнимое. По сути, вы можете проверять каждую секунду для объявления объекта 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);
0  
2012-04-11 23:50:19

С помощью требуют.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>
0  
2012-04-12 01:11:41

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>
0  
2012-04-12 02:20:21

Comments

    Ничего не найдено.
Click here to cancel reply.