Как загрузить локальные файлы скриптов в качестве резервной копии в случаях, когда CDN заблокированы/недоступны? [дубликат]
этот вопрос уже есть ответ здесь:
- Лучший способ использовать размещенный jQuery Google, но вернуться к моей размещенной библиотеке на Google fail 21 ответов
Я использую CDN для следующего javascript:
- https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
- https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
- http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
- http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js
для каждого из них, как я могу вернитесь к использованию локальной копии в экземпляре, где она может быть заблокирована/недоступна?
11 ответов:
чтобы подтвердить, что CDN скрипт загружен, вы можете проверить наличие любой переменной/функции, которую определяет этот скрипт, если она не определена - тогда cdn не удалось, и вам нужно загрузить локальную копию скрипта.
на этом принципе основаны такие решения:
<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>
(если нет окна.jQuery свойство определено cdn скрипт не загружен).
вы можете построить свои собственные решения, используя этот метод. Например, плагин jQuery tooltip создает
<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 шаблон.
Я использую 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' ], .......
во-первых-вы не должны включать их в другом порядке?
что-то вроде этого должно работать:
<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). проверяя на статическое
validate
функции на jQuery.объект ФН. Я не могу проверить второй скрипт таким же образом, потому что он ничего не добавляет, просто проксируя существующие методы, поэтому проще предположить, что если первый работает, второй будет работать тоже - ведь они предоставляются одним и тем же CDN.
вы должны знать, как вы можете убедиться, что 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) из Google CDN. Так как
<script>
теги блокируют общий процесс рендеринга и выполнения (если явно не указано иное), мы можем проверить сразу после этого, если
следующее решение проходит проверку как для HTML5, XHTML 1.0 Transitional, так и для других HTML-вариантов. Поместите следующее после каждого внешнего вызова JQuery. Будьте уверены, чтобы заменить на jQuery.минута.js с путем к вашей локальной копии сценария JQuery.
<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 пример также имеет ошибки проверки при использовании со старым HTML:
- обязательный атрибут "тип" не указан
- символ " & " является первым символом разделителя, но встречается как data
вы будете в порядке с решением HTML5 Boilerplate, если вы разрабатываете только для HTML5 и будущих HTML-вкусов, но поскольку вы можете обнаружить, что вставляете части своего кода в устаревший HTML, не рискуйте с этим one-size-fits-all подход.
вам нужно будет указать другую функцию для каждого внешне размещенного скрипта. Например, плагин jQuery Tooltip создает $.функция tooltip (), поэтому вы можете проверить ее следующим образом:
<script type="application/javascript">typeof ($.tooltip()) !== 'undefined' || document.write(unescape('%3Cscript src="jquery.tooltip.min.js"%3E%3C/script%3E'))</script>
Я ответил на аналогичные вопросы в 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>
вы также можете связать с другими темами пользовательского интерфейса, изменив имя темы. В этом случае измените имя базы на любое другое имя темы
/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 пользовательского интерфейса для соединения всех канадских ссылки 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>
<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>
принято от в этой статье
лучше всего сделать всю эту загрузку скрипта с вашим собственным кодом Javascript.
сначала попробуйте загрузить файл CDN, вставив новый элемент сценария в DOM. Затем проверьте, что он загружен, ища объект, который он определяет. Если объект не отображается, вставьте другой элемент сценария для загрузки локальной копии. Вероятно, лучше всего очистить DOM и удалить скрипты, которые также не удалось загрузить.
Не забудьте учитывать вопросы синхронизации, т. е. нагрузка не является мгновенный.
Я не думаю, что любое из решений может быть безболезненным, если связанный CDN действительно отфильтрован. (например, iptables / drop, неправильно настроенные маршрутизаторы.) Если вы не доверяете им, используйте все локально... И вы избавите себя от нескольких сюрпризов/звонков от пользователей в экзотической сети.