Подтвердить что ты не робот

Загрузите 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?

4b9b3361

ОТВЕТЫ

Ответ 1

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

Есть несколько проблем с этим методом загрузки javascript динамически. Когда дело доходит до базовых фреймворков, таких как jQuery, вы, вероятно, захотите загрузить их статически, потому что в противном случае вам придется написать всю платформу загрузки JavaScript...

Вы можете использовать некоторые из существующих JavaScript-загрузчиков или написать свой собственный, наблюдая за 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);
})();

Просто помните, что если вам нужно поддерживать действительно старые браузеры, такие как IE8, обработчики событий load не выполняются. В этом случае вам нужно будет опросить существование window.jQuery с помощью повторения window.setTimeout. Здесь есть рабочий JSFiddle с этим методом: http://jsfiddle.net/9N7Z2/3/

Есть много людей, которые уже сделали то, что вам нужно. Ознакомьтесь с некоторыми существующими фреймворками JavaScript Loader, например:

Ответ 2

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

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

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

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

Ответ 3

Веб-сайт 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>

Ответ 4

Вам нужно запустить свой код ПОСЛЕ завершения загрузки 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 уже существует на странице, попробуйте this

Ответ 5

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:

   <script>

        load = function() {
          load.getScript("jquery-1.7.2.js");
          load.tryReady(0); // We will write this function later. It 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>

Ответ 6

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

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

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

Это не самое элегантное решение, но его работоспособность. По существу, вы можете проверять каждую секунду, чтобы объявление объекта 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);

Ответ 7

Используя require.js, вы можете сделать то же самое более безопасным способом. Вы можете просто определить свою зависимость от jquery, а затем выполнить код, который вы хотите, используя зависимость при загрузке без загрязнения пространства имен:

Я вообще рекомендую эту библиотеку для управления всеми зависимостями от Javascript. Он прост и позволяет эффективно оптимизировать загрузку ресурсов. Однако есть некоторые меры предосторожности, которые вам могут потребоваться при использовании с JQuery. Мой любимый способ справиться с ними объясняется в этом github repo и отражается в следующем примере кода:

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