загрузить JQuery из внешнего источника, если не загружен

Question

загрузка jQuery из источника

Что мне нравится делать, так это удалять мой локальный jquery.js и размещать его где-то еще.Но что, если Google не работает?Итак, давайте закодируем запасной вариант, который использует другой источник, если jQuery «все еще» не загружен ...

Я сделал этот тестовый пример, но, похоже, он не работает, возможно, кто-то может мне помочь:1008 *http://jsfiddle.net/RBz4n

Answer 1

Это работает довольно хорошо (из HTML5 Boilerplate ):

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

Answer 2

Вот чистое решение javascript, которое начинается с определения доступности jQuery.Если нет, он пытается версию CDN.Если это не доступно, он пробует локальную версию.Обрабатывает 404 ошибки.Я использую это в решении, которое не знает, включает ли веб-сайт jQuery.

<script>
if (typeof jQuery === "undefined") {
  loadjQuery("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", verifyJQueryCdnLoaded);
} else 
  main();

function verifyJQueryCdnLoaded() {
  if (typeof jQuery === "undefined")
    loadjQuery("script/jquery-1.6.1.js", main);
  else
    main();
}

function loadjQuery(url, callback) {
  var script_tag = document.createElement('script');
  script_tag.setAttribute("src", url)
  script_tag.onload = callback; // Run callback once jQuery has loaded
  script_tag.onreadystatechange = function () { // Same thing but for IE
    if (this.readyState == 'complete' || this.readyState == 'loaded') callback();
  }
  script_tag.onerror = function() {
    loadjQuery("script/jquery-1.6.1.js", main);
  }
  document.getElementsByTagName("head")[0].appendChild(script_tag);
}

function main() {
  if (typeof jQuery === "undefined")
    alert("jQuery not loaded.");

  $(document).ready(function () {
    // Rest of your code here...
  });

}

</script>

Answer 3

Проблема с вашим скриптом в том, что вы не ждете загрузки скрипта, прежде чем проверять, был ли загружен jQuery.Вместо этого используйте что-то вроде этого:

function loadScript(src, callback) {
    var head=document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.onreadystatechange = function () {
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
            callback();
        }
    }
    script.onload = callback;
    script.src = src;
    head.appendChild(script);
}

function isjQueryLoaded() {
    return (typeof jQuery !== 'undefined');
}

function tryLoadChain() {
    var chain = arguments;
    if (!isjQueryLoaded()) {
        if (chain.length) {
            loadScript(
                chain[0],
                function() {
                    tryLoadChain.apply(this, Array.prototype.slice.call(chain, 1));
                }
            );
        } else {
            alert('not loaded!');
        }
    } else {
        alert('loaded!');
    }
}

tryLoadChain(
    'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
    'http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js',
    'mine.js');

Answer 4

Проблема

Если вы используете Firebug и видите, куда загружается jQuery, вы можете видеть, что Google успешно загрузил его.Почему это не работает?Поскольку запросы являются асинхронными, и пока ваш сценарий выполняется синхронно, он выполняет все шаги до загрузки первого сценария.

Итак:

1. jQuery not present.
2. Добавить сценарийэлемент для загрузки из Google (браузер отправляет запрос и продолжает выполнение скрипта)
3. jQuery отсутствует, добавьте другой источник
4. ...

и т. д. и т. д.

Решение

Что вам нужно сделать, это присоединить к onLoad событие загрузки элементов вашего скрипта и проверить наличие jQuery после их загрузки.

Скрипт выполняется молниеносно по сравнению счтобы отправить запрос на какой-либо сервер в Интернете и получить результаты обратно для обработки.

Дополнительные примечания

Как я прочитал, у вас будут проблемы с обнаружением 404 с использованием этой техники.Предлагаемый способ - использовать Ajax (XHR), а затем прикрепить элемент скрипта и добавить к нему полученный контент.Это был бы самый надежный способ сделать это для всех браузеров.

Answer 5

ответ Роджера смешен. Здесь вместо этого используйте 2 строки.

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