如何在 XHTML 中添加 jQuery CDN 回退？答案

【问题标题】：How to add jQuery CDN fallback in XHTML?如何在 XHTML 中添加 jQuery CDN 回退？
【发布时间】：2012-09-04 00:00:35
【问题描述】：

将CDN-hosted jQuery 加载到fallback to a local file 是一个很好的做法。例如。 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 xhtml cdn fallback

【解决方案1】：

此代码创建一个新的 <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);
}

【讨论】：

【解决方案2】：

createElement、setAttribute、appendChild 在替换 document.write 或 innerHTML 时照常进行

【讨论】：

【解决方案3】：

扩展 Maxim Vi. 的回复，我更接近最初的想法，将其插入到它被调用的位置：

<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" 进一步向下移动解决了它。我相应地调整了代码。

【讨论】：