Как добавить jQuery в голову с помощью JavaScript?

Question

Я пытаюсь включить jQuery на HTML-страницу условно. Его нужно добавить, только если его еще нет.

Я использую следующий код в верхней части моего тега body, чтобы добавить тег script, который включает в себя библиотеку jQuery.

<script type="text/javascript">

    if (typeof jQuery === 'undefined') {
        alert('now adding jquery');
        var head = document.getElementsByTagName("head")[0];
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';
        head.appendChild(script);
        if (typeof jQuery === 'undefined') {
            alert('jquery still not present :(');
        }
    } else {
        alert('jquery already present');
    }
</script>

Когда я выполняю его, я получаю сообщение о том, что jQuery по-прежнему отсутствует после добавления. Тег скрипта правильно отображается в источнике загруженной страницы.

Попытка использовать jQuery чуть ниже на моей странице подтверждает, что jQuery действительно не работает. Как и ожидалось, консоль Chrome на JavaScript говорит "$ notfined".

Как я могу заставить это работать?

Answer 1

Скрипт загружается асинхронно. Это означает, что его содержимое не доступно напрямую после добавления элемента.

использование onload вместо:

script = document.createElement('script');

script.onload = function() {
    // jQuery is available now
};

script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';

head.appendChild(script);

Answer 2

Boilerplate использует этот метод, чтобы проверить, загружен ли jQuery google, если не использует local:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

Похоже, что вы хотите достичь:)

Answer 3

Вы не ждете загрузки скрипта после добавления его в документ

Попробуйте этот код перед добавлением:

   function helper(){
        if (typeof jQuery === 'undefined') {
            alert('jquery still not present :(');
        }
   };

   script.onreadystatechange= function () {
      if (this.readyState == 'complete') helper();
   }
   script.onload= helper;

Я нашел это здесь, если вы хотите узнать больше

Также есть такие загрузчики, как StealJS или YepNope