协慌网

登录 贡献 社区

使用谷歌托管的 jQuery 的最佳方式,但回到我在谷歌上的托管库失败

尝试在 Google (或其他 Google 托管的 lib)上加载托管 jQuery的好方法,但如果 Google 尝试失败,请加载我的 jQuery 副本?

我不是说谷歌是片状的。有些情况下谷歌副本被封锁(例如在伊朗)。

我会设置一个计时器并检查 jQuery 对象吗?

这两份副本的危险是什么?

并不是真的在寻找 “只使用谷歌” 或 “只使用自己的” 等答案。我理解这些论点。我也理解用户可能会缓存 Google 版本。我正在考虑一般的云回退。


编辑:这部分补充......

由于 Google 建议使用 google.load 加载 ajax 库,并在完成后执行回调,我想知道这是否是序列化此问题的关键。

我知道这听起来有点疯狂。我只想弄清楚它是否可以以可靠的方式完成。


更新:jQuery 现在托管在微软的 CDN 上。

http://www.asp.net/ajax/cdn/

答案

你可以这样做:

<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 ready 事件处理程序都应该在<body>以避免错误(尽管它不是万无一失的!)。

使用 Google 托管的 jQuery 的另一个原因是,在某些国家 / 地区,Google 的域名被禁止。

迄今为止最简单,最干净的方法:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery"><\/script>')</script>

这似乎对我有用:

<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/jsapigoogle对象加载到window对象上。如果该对象不存在,我们假设对 Google 的访问失败。如果是这种情况,我们使用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>');
}

虽然我必须说,我不确定如果这对您的网站访问者来说是一个问题,那么您应该摆弄Google AJAX Libraries API

有趣的事实我最初尝试在各种版本中使用 try..catch 块,但找不到像这样干净的组合。我有兴趣看到这个想法的其他实现,纯粹作为练习。