如何在XHTML中添加jQuery CDN回退

How to add jQuery CDN fallback in XHTML?

本文关键字：jQuery CDN 回退 添加 XHTML      更新时间：2023-09-26

最好加载CDN托管的jQuery，但回退到本地文件。例如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发送），有其他选择吗？

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

createElement、setAttribute、appendChild在更换document.write或innerHTML 时按惯例

根据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"进一步下移解决了问题。我相应地调整了代码。

相关文章：