什么是一个好方法来尝试加载托管的jQuery在谷歌(或其他谷歌托管库)，但加载我的jQuery副本，如果谷歌尝试失败?
我不是说谷歌很古怪。在某些情况下，谷歌副本会被屏蔽(例如，显然在伊朗)。
我是否会设置一个计时器并检查jQuery对象?
两份拷贝都通过的危险是什么?
并不是真的在寻找像“只用谷歌”或“只用你自己的”这样的答案。我理解这些论点。我还知道用户可能缓存了谷歌版本。我在考虑云计算的后备方案。
编辑:这部分增加了…
因为谷歌建议使用谷歌。加载加载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就绪事件处理程序都应该在<body>中以避免错误(尽管这不是万无一错!)。
另一个不使用Google托管的jQuery的原因是，在一些国家，谷歌的域名是被禁止的。
这似乎对我很管用:
<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块，但找不到像这样干净的组合。我很有兴趣看到这个想法的其他实现，纯粹作为一个练习。
这里有一些很好的解决方案，但我想在本地文件方面更进一步。
在谷歌确实失败的情况下，它应该加载一个本地源，但服务器上的物理文件不一定是最佳选择。之所以提出这一点，是因为我目前正在实现相同的解决方案，只是希望返回到由数据源生成的本地文件。
我这样做的原因是，当涉及到跟踪我从谷歌加载的内容与我在本地服务器上的内容时，我想有一些想法。如果我想要更改版本，我将希望保持我的本地副本与我试图从谷歌加载的内容同步。在有许多开发人员的环境中，我认为最好的方法是自动化这个过程，这样所有人所要做的就是更改配置文件中的版本号。
以下是我提出的理论上可行的解决方案:
In an application configuration file, I'll store 3 things: absolute URL for the library, the URL for the JavaScript API, and the version number Write a class which gets the file contents of the library itself (gets the URL from app config), stores it in my datasource with the name and version number Write a handler which pulls my local file out of the db and caches the file until the version number changes. If it does change (in my app config), my class will pull the file contents based on the version number, save it as a new record in my datasource, then the handler will kick in and serve up the new version.
理论上，如果我的代码写得正确，我所需要做的就是改变我的应用程序配置中的版本号，然后viola!你有一个自动的备用解决方案，你不必在服务器上维护物理文件。
大家怎么想?也许这有点过分了，但这可能是维护AJAX库的一种优雅方法。
橡子
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>');
if (typeof jQuery == 'undefined')) { ...
Or
if(!window.jQuery){
将不工作，如果cdn版本没有加载，因为浏览器将通过这个条件运行，在它仍然下载剩下的javascript需要jQuery和它返回错误。解决方案是通过该条件加载脚本。
<script src="http://WRONGPATH.code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script><!-- WRONGPATH for test-->
<script type="text/javascript">
function loadCDN_or_local(){
if(!window.jQuery){//jQuery not loaded, take a local copy of jQuery and then my scripts
var scripts=['local_copy_jquery.js','my_javascripts.js'];
for(var i=0;i<scripts.length;i++){
scri=document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));
scri.type='text/javascript';
scri.src=scripts[i];
}
}
else{// jQuery loaded can load my scripts
var s=document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));
s.type='text/javascript';
s.src='my_javascripts.js';
}
}
window.onload=function(){loadCDN_or_local();};
</script>
步骤1:jQuery加载失败?(查看jQuery变量)
如何在JavaScript中检查一个未定义的变量
步骤2:动态导入(备份)javascript文件
如何在另一个JavaScript文件中包含一个JavaScript文件?
在ASP中使用Razor语法。NET，这段代码提供了回退支持，并使用虚拟根:
@{var jQueryPath = Url.Content("~/Scripts/jquery-1.7.1.min.js");}
<script type="text/javascript">
if (typeof jQuery == 'undefined')
document.write(unescape("%3Cscript src='@jQueryPath' type='text/javascript'%3E%3C/script%3E"));
</script>
或者制作一个helper (helper概述):
@helper CdnScript(string script, string cdnPath, string test) {
@Html.Raw("<script src=\"http://ajax.aspnetcdn.com/" + cdnPath + "/" + script + "\" type=\"text/javascript\"></script>" +
"<script type=\"text/javascript\">" + test + " || document.write(unescape(\"%3Cscript src='" + Url.Content("~/Scripts/" + script) + "' type='text/javascript'%3E%3C/script%3E\"));</script>")
}
像这样使用它:
@CdnScript("jquery-1.7.1.min.js", "ajax/jQuery", "window.jQuery")
@CdnScript("jquery.validate.min.js", "ajax/jquery.validate/1.9", "jQuery.fn.validate")
到目前为止，最简单、最干净的方法是:
<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>
如果你的网站上嵌入了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提供的功能测试，所以我将它嵌入到网站中。所以实际上没有开销。
更新: 这个答案原来是错的。真正的解释请看评论。
你们的问题大部分都已经回答了，但至于最后一部分
两份拷贝都通过的危险是什么?
没有一个真的。你会浪费带宽，下载第二个无用的副本可能会增加几毫秒的时间，但如果它们都通过了，也不会造成实际伤害。当然，您应该使用上面提到的技术来避免这种情况。
您可能希望使用本地文件作为最后的手段。
现在看来，jQuery自己的CDN不支持https。如果是这样的话，你可能会想先从那里加载。
这是序列: 谷歌CDN => 微软CDN => 本地副本。
<!-- load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- fallback to Microsoft's Ajax CDN -->
<script> window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">\x3C/script>')</script>
<!-- fallback to local file -->
<script> window.jQuery || document.write('<script src="Assets/jquery-1.8.3.min.js">\x3C/script>')</script>
我认为应该转义字符串中的最后一个<到\x3C。当浏览器看到时，它认为这是脚本块的结束(因为HTML解析器不了解JavaScript，它无法区分仅仅出现在字符串中的内容，以及实际上意味着结束脚本元素的内容)。因此，在HTML页面中以JavaScript形式出现(在最好的情况下)会导致错误，(在最坏的情况下)会造成巨大的安全漏洞。
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>
有条件地加载最新/遗留的jQuery版本和回退:
<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/public/vendor/jquery-legacy/dist/jquery.min.js">\x3C/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/public/vendor/jquery/dist/jquery.min.js">\x3C/script>')</script>
<!--<![endif]-->
我做了一个Gist，如果还没有加载jQuery，它应该动态加载，如果源代码失败，它将继续执行回退(从许多答案拼接在一起):https://gist.github.com/tigerhawkvok/9673154
请注意，我计划保持更新主旨，但不是这个答案，因为它是值得的!
/* See https://gist.github.com/tigerhawkvok/9673154 for the latest version */
function cascadeJQLoad(i) { // Use alternate CDNs where appropriate to load jQuery
if (typeof(i) != "number") i = 0;
// the actual paths to your jQuery CDNs
var jq_paths = [
"ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js",
"ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"
];
// Paths to your libraries that require jQuery
var dependent_libraries = [
"js/c.js"
];
if (window.jQuery === undefined && i < jq_paths.length) {
i++;
loadJQ(jq_paths[i], i, dependent_libraries);
}
if (window.jQuery === undefined && i == jq_paths.length) {
// jQuery failed to load
// Insert your handler here
}
}
/***
* You shouldn't have to modify anything below here
***/
function loadJQ(jq_path, i, libs) { //load jQuery if it isn't already
if (typeof(jq_path) == "undefined") return false;
if (typeof(i) != "number") i = 1;
var loadNextJQ = function() {
var src = 'https:' == location.protocol ? 'https' : 'http';
var script_url = src + '://' + jq_path;
loadJS(script_url, function() {
if (window.jQuery === undefined) cascadeJQLoad(i);
});
}
window.onload = function() {
if (window.jQuery === undefined) loadNextJQ();
else {
// Load libraries that rely on jQuery
if (typeof(libs) == "object") {
$.each(libs, function() {
loadJS(this.toString());
});
}
}
}
if (i > 0) loadNextJQ();
}
function loadJS(src, callback) {
var s = document.createElement('script');
s.src = src;
s.async = true;
s.onreadystatechange = s.onload = function() {
var state = s.readyState;
try {
if (!callback.done && (!state || /loaded|complete/.test(state))) {
callback.done = true;
callback();
}
} catch (e) {
// do nothing, no callback function passed
}
};
s.onerror = function() {
try {
if (!callback.done) {
callback.done = true;
callback();
}
} catch (e) {
// do nothing, no callback function passed
}
}
document.getElementsByTagName('head')[0].appendChild(s);
}
/*
* The part that actually calls above
*/
if (window.readyState) { //older microsoft browsers
window.onreadystatechange = function() {
if (this.readyState == 'complete' || this.readyState == 'loaded') {
cascadeJQLoad();
}
}
} else { //modern browsers
cascadeJQLoad();
}
对于那些使用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);
虽然编写document.write("<script></script>")对于jQuery来说似乎更容易退出，但Chrome在这种情况下给出了验证错误。所以我更喜欢打破“剧本”这个词。所以它变得像上面一样安全。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script>if (typeof jQuery === "undefined") {
window.jqFallback = true;
document.write("<scr"+"ipt src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></scr"+"ipt>");
} </script>
对于长期的问题，最好记录JQuery的回退。在上面的代码中，如果第一个CDN不可用，则从另一个CDN加载JQuery。但是你可能想要知道错误的CDN并永久删除它。(这种情况是非常特殊的情况)此外，最好记录回退问题。所以你可以用AJAX发送错误案例。因为JQuery没有定义，所以对于AJAX请求应该使用普通的javascript。
<script type="text/javascript">
if (typeof jQuery === 'undefined' || window.jqFallback == true) {
// XMLHttpRequest for IE7+, Firefox, Chrome, Opera, Safari
// ActiveXObject for IE6, IE5
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var url = window.jqFallback == true ? "/yourUrl/" : "/yourUrl2/";
xmlhttp.open("POST", url, true);
xmlhttp.send();
}
</script>
无法从超出您控制的外部数据存储加载资源是很困难的。寻找缺失的函数作为避免超时的方法是完全错误的，如下所述: http://www.tech-101.com/support/topic/4499-issues-using-a-cdn/
还有另一个替代ajax.googleapis.com与cdnjs.cloudflare.com:
(function (doc, $)
{
'use strict';
if (typeof $ === 'undefined')
{
var script = doc.querySelector('script[src*="jquery.min.js"]'),
src = script.src.replace('ajax.googleapis.com', 'cdnjs.cloudflare.com');
script.parentNode.removeChild(script);
doc.write('<script src="' + src + '"></script>');
}
})(document, window.jQuery || window.Zepto);
你可以通过在字符串中指定一个jQuery版本 完美的资产管理，不与HTML剪辑工作 在野外测试-工作完美的用户从中国
谷歌托管jQuery
如果你关心旧的浏览器，主要是IE9之前的IE版本，这是最广泛兼容的jQuery版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>如果你不关心老die，这个更小更快:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>备份/后备计划!
无论哪种方式，您都应该使用回退到本地，以防谷歌CDN失败(不太可能)或在您的用户访问您的网站的位置被阻止(略有可能)，如伊朗或有时中国。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="/path/to/your/jquery"><\/script>'); }
</script>
参考:http://websitespeedoptimizations.com/ContentDeliveryNetworkPost.aspx
你可以使用如下代码:
<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');
}
}
}]);
几乎所有的公共cdn都相当可靠。但是，如果您担心阻塞谷歌域，那么您可以简单地退回到另一个jQuery CDN。然而，在这种情况下，您可能更愿意以相反的方式进行，并使用其他CDN作为首选选项，并退回到谷歌CDN，以避免请求失败和等待时间:
<script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');
</script>
你应该永远不需要使用个人副本。这是我的全套皮带和牙套脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>jQuery</title>
<!-- EMBED JQUERY USING GOOGLE APIs -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- IF THAT FAILS EMBED JQUERY USING CLOUDFLARE CDN -->
<script type="text/javascript">
window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"><\/script>');
</script>
<!-- IF THAT FAILS ************* HOW??? *********** EMBED JQUERY FROM MICROSOFT -->
<script type="text/javascript">
window.jQuery || document.write('<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"><\/script>');
</script>
<!-- IF THAT FAILS ************* WOW!!! *********** EMBED JQUERY FROM JQUERY.COM -->
<script type="text/javascript">
window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.6.0.min.js"><\/script>');
</script>
<!-- IF THAT FAILS ************* LET'S STOP!!! *********** EMBED JQUERY FROM PERSONAL COPY -->
<script type="text/javascript">
window.jQuery || document.write('<script src="jquery.min.js"><\/script>');
</script>
</head>
<body>
</body>
</html>
