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