什么是一个好方法来尝试加载托管的jQuery在谷歌(或其他谷歌托管库)，但加载我的jQuery副本，如果谷歌尝试失败?
我不是说谷歌很古怪。在某些情况下，谷歌副本会被屏蔽(例如，显然在伊朗)。
我是否会设置一个计时器并检查jQuery对象?
两份拷贝都通过的危险是什么?
并不是真的在寻找像“只用谷歌”或“只用你自己的”这样的答案。我理解这些论点。我还知道用户可能缓存了谷歌版本。我在考虑云计算的后备方案。
编辑:这部分增加了…
因为谷歌建议使用谷歌。加载加载ajax库，它执行回调时，我想知道这是否是序列化这个问题的关键。
我知道这听起来有点疯狂。我只是想弄清楚它是否能以一种可靠的方式完成。
更新:jQuery现在托管在微软的CDN上。
http://www.asp.net/ajax/cdn/
当前回答
这似乎对我很管用:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<p id="test">hello jQuery</p>
</body>
</html>
它的工作方式是使用调用http://www.google.com/jsapi加载到窗口对象的谷歌对象。如果该对象不存在，则假设对谷歌的访问失败。如果是这种情况，我们使用document.write加载一个本地副本。(在这种情况下，我使用自己的服务器，请使用自己的服务器进行测试)。
我还测试了window.google.load的存在——我还可以做一个typeof检查，看看这些东西是否是适当的对象或函数。但我觉得这个很管用。
这里只是加载逻辑，因为代码高亮显示似乎失败了，因为我张贴了整个HTML页面，我正在测试:
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
虽然我必须说，我不确定如果这是您的网站访问者的担忧，您应该摆弄谷歌AJAX Libraries API在所有。
有趣的事实:我最初尝试在各种版本中使用try. catch块，但找不到像这样干净的组合。我很有兴趣看到这个想法的其他实现，纯粹作为一个练习。
其他回答
如果你的网站上嵌入了modernizr.js，你可以使用内置的yepnope.js来异步加载你的脚本——其中包括jQuery(带备份)。
Modernizr.load([{
load : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
},{
test : window.jQuery,
nope : 'path/to/local/jquery-1.7.2.min.js',
both : ['myscript.js', 'another-script.js'],
complete : function () {
MyApp.init();
}
}]);
这将从Google-cdn加载jQuery。然后检查jQuery是否加载成功。如果不是("nope")，则加载本地版本。同时也加载了您的个人脚本——“both”表示加载过程的初始化独立于测试的结果。
当所有加载过程完成时，执行一个函数，在这种情况下为'MyApp.init'。
我个人更喜欢这种异步脚本加载方式。由于我在构建网站时依赖modernizr提供的功能测试，所以我将它嵌入到网站中。所以实际上没有开销。
if (typeof jQuery == 'undefined') {
// or if ( ! window.jQuery)
// or if ( ! 'jQuery' in window)
// or if ( ! window.hasOwnProperty('jQuery'))
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/libs/jquery.js';
var scriptHook = document.getElementsByTagName('script')[0];
scriptHook.parentNode.insertBefore(script, scriptHook);
}
在您尝试从CDN中包含谷歌的副本之后。
在HTML5中，不需要设置type属性。
你也可以用…
window.jQuery || document.write('<script src="/libs/jquery.js"><\/script>');
你可以这样做:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/path/to/your/jquery"><\/script>');
</script>
这应该在页面的<head>中，任何jQuery就绪事件处理程序都应该在<body>中以避免错误(尽管这不是万无一错!)。
另一个不使用Google托管的jQuery的原因是，在一些国家，谷歌的域名是被禁止的。
你可以使用如下代码:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>window.jQuery || document.write('<script type="text/javascript" src="./scripts/jquery.min.js">\x3C/script>')</script>
但是你也可以使用一些库来为你的脚本设置一些可能的回退，并优化加载过程:
basket.js RequireJS yepnope
例子:
basket.js 我认为目前最好的变种。将您的脚本缓存在localStorage，这将加快下次加载。最简单的调用:
basket.require({ url: '/path/to/jquery.js' });
这将返回一个promise，你可以在错误时执行下一步调用，或者在成功时加载依赖项:
basket
.require({ url: '/path/to/jquery.js' })
.then(function () {
// Success
}, function (error) {
// There was an error fetching the script
// Try to load jquery from the next cdn
});
RequireJS
requirejs.config({
enforceDefine: true,
paths: {
jquery: [
'//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min',
//If the CDN location fails, load from this location
'js/jquery-2.0.0.min'
]
}
});
//Later
require(['jquery'], function ($) {
});
耶普诺普
yepnope([{
load: 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('js/jquery-2.0.0.min.js');
}
}
}]);
对于那些使用ASP的人。在你的BundleConfig.cs中添加以下代码来启用jquery的CDN:
bundles.UseCdn = true;
Bundle jqueryBundle = new ScriptBundle("~/bundles/jquery", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js").Include("~/Scripts/jquery-{version}.js");
jqueryBundle.CdnFallbackExpression = "window.jQuery";
bundles.Add(jqueryBundle);
