当前位置：文江博客话题详情

使用 Google 托管 jQuery 的最佳方式，但回退到我在 Google 上的托管库失败

发布于 2024-07-25 02:57:58 字数 663 浏览 13 评论 0原文

尝试加载 Google 托管的 jQuery（或其他 Google 托管的libs)，但如果 Google 尝试失败，则加载我的 jQuery 副本？

我并不是说谷歌很脆弱。在某些情况下，谷歌副本会被屏蔽（例如在伊朗）。

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

两份副本都通过会有什么危险？

并不是真正寻找诸如“仅使用 Google 的”或“仅使用您自己的”之类的答案。我理解这些论点。我还了解到，用户很可能缓存了 Google 版本。我正在考虑云的总体后备方案。

编辑：这部分添加...

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

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

更新：jQuery 现在托管在 Microsoft 的 CDN 上。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少女七分熟 2024-08-01 02:57:59

您可以使用如下代码：

<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
我认为目前最好的变体。将在本地存储中缓存您的脚本，这将加快下次加载的速度。最简单的调用：

basket.require({ url: '/path/to/jquery.js' });

这将返回一个承诺，您可以在错误时执行下一个调用，或者在成功时加载依赖项：

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

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');
    }
  }
}]);

You can use code like:

<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>

But also there are libraries you can use to setup several possible fallbacks for your scripts and optimize the loading process:

basket.js
RequireJS
yepnope

Examples:

basket.js
I think the best variant for now. Will cach your script in the localStorage, that will speed up next loadings. The simplest call:

basket.require({ url: '/path/to/jquery.js' });

This will return a promise and you can do next call on error, or load dependencies on success:

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

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');
    }
  }
}]);

回复收藏 0 原文

不气馁 2024-08-01 02:57:59

您永远不需要使用个人副本。这是我完整的腰带和背带脚本。

<!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>

You should never need to use a personal copy. Here is my full belt and braces 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>

回复收藏 0 原文

少女情怀诗 2024-08-01 02:57:58

您可以这样实现：

<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>

这应该位于页面的中，并且任何 jQuery 就绪事件处理程序都应该位于中以避免错误（尽管这不是万无一失的！）。

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

You can achieve it like this:

<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>

This should be in your page's <head> and any jQuery ready event handlers should be in the <body> to avoid errors (although it's not fool-proof!).

One more reason to not use Google-hosted jQuery is that in some countries, Google's domain name is banned.

回复收藏 0 原文

断肠人 2024-08-01 02:57:58

迄今为止最简单、最干净的方法：

<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>

The easiest and cleanest way to do this by far:

<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>

回复收藏 0 原文

給妳壹絲溫柔 2024-08-01 02:57:58

这似乎对我有用：

<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 的 google 对象://www.google.com/jsapi 加载到 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>');
}

虽然我必须说，但我不确定这是否是您的网站访问者所关心的问题，您应该摆弄 < href="https://developers.google.com/speed/libraries/" rel="noreferrer">Google AJAX Libraries API 根本没有。

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

This seems to work for me:

<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>

The way it works is to use the google object that calling http://www.google.com/jsapi loads onto the window object. If that object is not present, we are assuming that access to Google is failing. If that is the case, we load a local copy using document.write. (I'm using my own server in this case, please use your own for testing this).

I also test for the presence of window.google.load - I could also do a typeof check to see that things are objects or functions as appropriate. But I think this does the trick.

Here's just the loading logic, since code highlighting seems to fail since I posted the whole HTML page I was testing:

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>');
}

Though I must say, I'm not sure that if this is a concern for your site visitors you should be fiddling with the Google AJAX Libraries API at all.

Fun fact: I tried initially to use a try..catch block for this in various versions but could not find a combination that was as clean as this. I'd be interested to see other implementations of this idea, purely as an exercise.

回复收藏 0 原文

那伤。 2024-08-01 02:57:58

如果您的网站上嵌入了 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”），则加载本地版本。此外，您的个人脚本也会被加载 - “两者”表示加载过程的启动与测试结果无关。

当所有加载过程完成时，将执行一个函数，在“MyApp.init”的例子中。

我个人更喜欢这种异步脚本加载的方式。由于我在构建网站时依赖 Modernizr 提供的功能测试，因此无论如何我都将其嵌入到网站中。所以实际上没有任何开销。

If you have modernizr.js embedded on your site, you can use the built-in yepnope.js to load your scripts asynchronously - among others jQuery (with fallback).

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();
    }
}]);

This loads jQuery from the Google-cdn. Afterwards it's checked, if jQuery was loaded successfully. If not ("nope"), the local version is loaded. Also your personal scripts are loaded - the "both" indicates, that the load-process is iniated independently from the result of the test.

When all load-processes are complete, a function is executed, in the case 'MyApp.init'.

I personally prefer this way of asynchronous script loading. And as I rely on the feature-tests provided by modernizr when building a site, I have it embedded on the site anyway. So there's actually no overhead.

回复收藏 0 原文

温柔少女心 2024-08-01 02:57:58

这里有一些很好的解决方案，但我想在本地文件方面更进一步。

在 Google 确实失败的情况下，它应该加载本地源，但服务器上的物理文件不一定是最佳选择。我提出这个问题是因为我目前正在实现相同的解决方案，只是我想回退到由数据源生成的本地文件。

我这样做的原因是，在跟踪我从 Google 加载的内容与本地服务器上加载的内容时，我想有一些想法。如果我想更改版本，我需要使本地副本与我尝试从 Google 加载的内容保持同步。在有许多开发人员的环境中，我认为最好的方法是自动化此过程，这样人们所要做的就是更改配置文件中的版本号。

这是我提出的解决方案，理论上应该有效：

在应用程序配置文件中，我将存储 3 个内容：库的绝对 URL、JavaScript API 的 URL 和版本号
编写一个类，用于获取应用程序的文件内容库本身（从应用程序配置获取 URL），将其与名称和版本号一起存储在我的数据源中
编写一个处理程序，将我的本地文件从数据库中拉出并缓存该文件，直到版本号发生变化。
如果它确实发生变化（在我的应用程序配置中），我的类将根据版本号提取文件内容，将其保存为我的数据源中的新记录，然后处理程序将启动并提供新版本。

理论上，如果我的代码编写正确，我需要做的就是更改我的应用程序配置中的版本号，然后中提琴！您有一个自动化的后备解决方案，并且您不必在服务器上维护物理文件。

大家觉得怎么样？也许这有些过头了，但它可能是维护 AJAX 库的一种优雅方法。

橡子

回复收藏 0 原文

命比纸薄 2024-08-01 02:57:58

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 的 Google 副本后。

在 HTML5 中，您不需要设置 type 属性。

您还可以使用...

window.jQuery || document.write('<script src="/libs/jquery.js"><\/script>');

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);

}

After you attempt to include Google's copy from the CDN.

In HTML5, you don't need to set the type attribute.

You can also use...

window.jQuery || document.write('<script src="/libs/jquery.js"><\/script>');

回复收藏 0 原文

牛↙奶布丁 2024-08-01 02:57:58

您可能想使用本地文件作为最后的手段。

好像现在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>

You might want to use your local file as a last resort.

Seems as of now jQuery's own CDN does not support https. If it did you then might want to load from there first.

So here's the sequence:
Google CDN =>
Microsoft CDN =>
Your local copy.

<!-- 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>

回复收藏 0 原文

饮惑 2024-08-01 02:57:58

有条件地加载最新/旧版 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]-->

Conditionally load latest/legacy jQuery version and fallback:

<!--[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]-->

回复收藏 0 原文

暮色兮凉城 2024-08-01 02:57:58

第 1 步：jQuery 是否加载失败？（检查 jQuery 变量）

如何检查 JavaScript 中未定义的变量

步骤 2：动态导入（备份）javascript 文件

如何将一个 JavaScript 文件包含在另一个 JavaScript 文件中？

回复收藏 0 原文

热血少△年 2024-08-01 02:57:58

由于Google的禁止问题我更喜欢使用微软的cdn
http://www.asp.net/ajaxlibrary/cdn.ashx

回复收藏 0 原文

离旧人 2024-08-01 02:57:58

对于使用 ASP.NET MVC 5 的用户，请在 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);

For those people using ASP.NET MVC 5, add this code in your BundleConfig.cs to enable the CDN for jquery:

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);

回复收藏 0 原文

毁梦 2024-08-01 02:57:58

更新：
事实证明这个答案是错误的。真正的解释请看评论。

大多数人的问题已经得到解答，但至于最后一部分：

两个副本都通过会有什么危险？

真的没有。您会浪费带宽，可能会增加几毫秒的时间来下载第二个无用的副本，但如果它们都通过了，则不会造成实际损害。当然，您应该使用上述技术来避免这种情况。

回复收藏 0 原文

ま昔日黯然 2024-08-01 02:57:58

我做了一个要点，如果尚未加载，则应该动态加载 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();
}

I made a Gist that should dynamically load jQuery if it isn't already loaded, and if the source fails, it proceeds onto fallbacks (stitched together from many answers): https://gist.github.com/tigerhawkvok/9673154

Please note I plan to keep the Gist updated but not this answer, for what it's worth!

/* 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();
}

回复收藏 0 原文

得不到的就毁灭 2024-08-01 02:57:58

Google 托管 jQuery

如果您关心旧版浏览器，主要是 IE9 之前的 IE 版本，这是兼容最广泛的 jQuery 版本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

如果您不关心旧版 IE，那么这个版本更小、速度更快：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

< strong>备份/回退计划！

无论哪种方式，您都应该使用回退到本地，以防万一 Google 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

Google Hosted jQuery

If you care about older browsers, primarily versions of IE prior to IE9, this is the most widely compatible jQuery version

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

If you don’t care about oldIE, this one is smaller and faster:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Backup/Fallback Plan!

Either way, you should use a fallback to local just in case the Google CDN fails (unlikely) or is blocked in a location that your users access your site from (slightly more likely), like Iran or sometimes China.

<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>

Reference: http://websitespeedoptimizations.com/ContentDeliveryNetworkPost.aspx

回复收藏 0 原文

笑饮青盏花 2024-08-01 02:57:58

我认为应该避开最后一个< 到字符串中的 \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>

I consider that should escape the last < to \x3C in string. When the browser sees , it considers this to be the end of the script block (since the HTML parser has no idea about JavaScript, it can't distinguish between something that just appears in a string, and something that's actually meant to end the script element). So appearing literally in JavaScript that's inside an HTML page will (in the best case) cause errors, and (in the worst case) be a huge security hole.

<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>

回复收藏 0 原文

故笙诉离歌 2024-08-01 02:57:58

if (typeof jQuery == 'undefined')) { ...

或者

if(!window.jQuery){

如果未加载 cdn 版本，则不起作用，因为浏览器将运行这种情况，并且在此期间仍然下载需要 jQuery 的其余 javascript，并返回错误。解决方案是通过该条件加载脚本。

    <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>

if (typeof jQuery == 'undefined')) { ...

if(!window.jQuery){

Will not works if cdn version not loaded, because browser will run through this condition and during it still downloading the rest of javascripts which needs jQuery and it returns error. Solution was to load scripts through that condition.

    <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>

回复收藏 0 原文

北方的韩爷 2024-08-01 02:57:58

使用 ASP.NET 中的 Razor 语法，此代码提供后备支持并可与虚拟根一起使用：

@{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 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")

Using Razor syntax in ASP.NET, this code provides fallback support and works with a virtual root:

@{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>

Or make a helper (helper overview):

@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>")
}

and use it like this:

@CdnScript("jquery-1.7.1.min.js", "ajax/jQuery", "window.jQuery")
@CdnScript("jquery.validate.min.js", "ajax/jquery.validate/1.9", "jQuery.fn.validate")

回复收藏 0 原文

策马西风 2024-08-01 02:57:58

尽管编写 document.write("") 对于 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，因此您应该使用普通 javascript 进行 AJAX 请求。

<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>

Although writing document.write("<script></script>") seems easier for jQuery backoff, Chrome gives validation error on that case. So I prefer breaking "script" word. So it becomes safer like above.

<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>

For long term issues, it would be better to log JQuery fallbacks. In the code above, if first CDN is not available JQuery is loaded from another CDN. But you could want to know that erroneous CDN and remove it permanently. (this case is very exceptional case) Also it is better to log fallback issues. So you can send erroneous cases with AJAX. Because of JQuery isn't defined, you should use vanilla javascript for AJAX request.

<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>

回复收藏 0 原文

坦然微笑 2024-08-01 02:57:58

无法从您无法控制的外部数据存储加载资源是很困难的。寻找缺失的函数作为避免超时的方法是完全错误的，如下所述：
http://www.tech-101.com/支持/主题/4499-issues-using-a-cdn/

回复收藏 0 原文

前事休说 2024-08-01 02:57:58

几乎所有公共 CDN 都非常可靠。但是，如果您担心 google 域被阻止，那么您可以简单地回退到替代的 jQuery CDN。 但是，在这种情况下，您可能更愿意采取相反的方式，并使用其他 CDN 作为您的首选，然后回退到 Google 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>

Almost all public CDNs are pretty reliably. However, if you are worried about blocked google domain, then you can simply fallback to an alternative jQuery CDN. However, in such a case, you may prefer to do it opposite way and use some other CDN as your preferred option and fallback to Google CDN to avoid failed requests and waiting time:

<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>

回复收藏 0 原文

じее 2024-08-01 02:57:58

还有一个后备方案，将 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);

您可以通过在字符串
Perfect for Asset Management 中指定它来坚持使用 jQuery 版本，该版本不会不支持 HTML 片段
经过野外测试 - 非常适合中国用户

Yet another fallback that replaces ajax.googleapis.com with 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);