Как загрузить локальные файлы script в качестве резервного в случаях, когда CDN заблокированы/недоступны?

Im использует CDN для следующего javascript:

Для каждого из них, как я могу вернуться к использованию локальной копии в экземпляре, где он может быть заблокирован/недоступен?

Ответы

Ответ 1

Чтобы подтвердить загрузку cdn script, вы можете проверить наличие любой переменной/функции, которую этот script определяет, если это undefined - тогда cdn не удалось, и вам нужно загрузить локальную копию script.

В этом принципе основаны такие решения:

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

(если нет свойства window.jQuery, определенного cdn script, не загружено).

Вы можете создавать свои собственные решения, используя этот метод. Например, плагин jQuery tooltip создает функцию $.tooltip(), поэтому мы можем проверить ее с помощью кода следующим образом:

<script>
    if (typeof $.tooltip === 'undefined') {
        document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>');
    }
</script>

Ответ 2

Я бы заглянул в плагин, например yepnopejs

yepnope([{
  load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}]);

Принимает массив объектов для проверки, проверяет документацию на сайте

Ответ 3

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

Взято из HTML5 Boilerplate.

Ответ 4

Я использую http://fallback.io/

  fallback.load({
        // Include your stylesheets, this can be an array of stylesheets or a string!
        page_css: 'index.css',

        // JavaScript library. THE KEY MUST BE THE LIBARIES WINDOW VARIABLE!
        JSON: '//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js',

        // Here goes a failover example. The first will fail, therefore Fallback JS will load the second!
        jQuery: [
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.FAIL_ON_PURPOSE.min.js',
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js'
        ],   .......

Ответ 5

Первое: не следует ли включать их в другом порядке?

что-то вроде этого должно работать:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script>jQuery.fn.validate || document.write('<script src="js/jquery.validate.min.js">\x3C/script><script src="js/jquery.validate.unobtrusive.min.js">\x3C/script>'</script>

то, что я здесь делаю, просто проверяет, был ли загружен первый плагин (проверка jQ). путем проверки статической функции validate на объекте jQuery.fn. Я не могу проверить второй script таким же образом, потому что он ничего не добавляет, просто проксирует существующие методы, поэтому легче предположить, что если первый работает, второй тоже будет работать - в конце концов, они предоставляются тем же CDN.

Ответ 6

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js">\x3C/script>'</script>

Итак, это попытка загрузить jQuery (1.5.1) из CDN Google. Поскольку теги <script> блокируют общий процесс визуализации и выполнения (если явно не указано иное), мы можем проверить сразу после этого, если объект jQuery находится внутри window. Если нет, просто отбросьте, записав в документ другой тег <script>, ссылаясь на локальную копию.

Ответ 7

Следующее решение проходит проверку как для HTML5, XHTML 1.0 Transitional, так и для других HTML-вкусов. После каждого внешнего вызова JQuery поместите следующее. Обязательно замените jquery.min.js на путь к вашей локальной копии JQuery script.

<script type="application/javascript">window.jQuery || 
document.write(unescape('%3Cscript src="jquery.min.js"%3E%3C/script%3E'))</script>

Если вы не используете unescape, вы будете иметь ошибки при проверке с помощью http://validator.w3.org, так как "%" не разрешено в список спецификаций атрибутов.

В примере HTML5 Boilerplate также есть ошибки проверки при использовании со старым HTML:

обязательный атрибут "тип" не указан
символ "&" является первым символом разделителя, но имеет место как данные

У вас все будет в порядке с решением HTML5 Boilerplate, если вы разрабатываете только HTML5 и будущие HTML-варианты, но поскольку вы можете вставлять часть своего кода в устаревший HTML, играйте его безопасно с помощью этого одноразового использования -всего подхода.

Вам нужно указать другую функцию для каждого размещенного на стороне script. Например, плагин JQuery Tooltip создает функцию $.tooltip(), поэтому вы можете проверить его со следующим:

<script type="application/javascript">typeof ($.tooltip()) !== 'undefined' || 
document.write(unescape('%3Cscript src="jquery.tooltip.min.js"%3E%3C/script%3E'))</script>

Ответ 8

Я ответил на аналогичные вопросы в jquery ui - как использовать google CDN

Вы можете сделать вызов, используя

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

Вы также можете ссылаться на другие темы Ui, изменяя название темы. В этом случае измените базу имен на любое другое название темы /base/jquery-ui.css на любую другую тему.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />

Просмотрите блог jQuery UI для ссылки всех ссылок CDN http://blog.jqueryui.com/

Если вы хотите вернуться на свой компьютер в случае неудачи Google, вы можете сделать

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
    document.write(unescape("%3Cscript src='/jquery.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Ответ 9

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>   
<script type="text/javascript">
if(typeof jQval == 'undefined')
{
    document.write(unescape("%3Cscript src='/Scripts/jquery.validate.unobtrusive.min.js' type='text/javascript'%3E%3C/script%3E"));
    document.write(unescape("%3Cscript src='/Scripts/jquery.validate.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Взято из в этой статье

Ответ 10

Лучше всего выполнить эту загрузку script с помощью собственного кода Javascript.

Сначала попробуйте загрузить файл CDN, вставив новый элемент script в DOM. Затем проверьте, что он загружен, ища объект, который он определяет. Если объект не отображается, добавьте еще один элемент script, чтобы загрузить локальную копию. Вероятно, лучше всего очистить DOM и удалить SCRIPT, которые также не загрузились.

Не забывайте учитывать проблемы с синхронизацией, т.е. загрузка не мгновенная.

Ответ 11

Я не думаю, что любое решение может быть безболезненным, если связанный CDN действительно отфильтрован. (например, например, iptables/drop, неправильно сконфигурированные маршрутизаторы). Если вы не доверяете им, используйте все локально... И вы избавляетесь от нескольких неожиданностей/звонков от пользователей в экзотической сети.