Как добавить запасной вариант jQuery CDN в XHTML?

Рекомендуется загружать jQuery, размещенный на CDN, но возврат к локальному файлу. Например. HTML5 Boilerplate делает это следующим образом:

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

Но как то же самое можно реализовать в XHTML? Поскольку document.write() не работает в правильном XHTML (отправленном как application/xhtml+xml), есть ли альтернатива?


javascript jquery cdn fallback xhtml
person selfthinker    schedule 02.09.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Этот код создает новый элемент <script/> и добавляет его перед первым элементом <script/> на вашей странице:

if (!window.jQuery) {
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'js/vendor/jquery-1.8.0.min.js';

   var firstScript = document.getElementsByTagName('script')[0];
   firstScript.parentNode.insertBefore(script, firstScript);
}
person Maksim Vi.    schedule 02.09.2012

arrow_upward
0
arrow_downward

createElement, setAttribute, appendChild как обычно при замене document.write или innerHTML

person Quentin    schedule 02.09.2012

arrow_upward
0
arrow_downward

Расширяя ответ Максима В., я приблизил его к исходной идее, чтобы вставить его туда, где он называется:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" id="jQuery">
if (!window.jQuery) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/js/jquery-1.8.0.min.js';
    var jQueryScript = document.getElementById('jQuery');
    jQueryScript.parentNode.insertBefore(script, jQueryScript);
}
</script>

Таким образом, вы можете хранить свои сценарии в нижнем колонтитуле (если у вас есть другие сценарии внутри страницы, они не будут вставлены слишком рано или в других местах).

Редактировать: у меня были проблемы в некоторых браузерах с этим решением, но перемещение id="jQuery" дальше вниз решило проблему. Я соответствующим образом изменил код.

person selfthinker    schedule 02.09.2012