在 CDN 被阻止/不可用的情况下，如何加载本地脚本文件作为后备？

Question

我正在为以下 javascript 使用 CDN：

• https://ajax.googleapis .com/ajax/libs/jquery/1.5.1/jquery.min.js
• https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
• http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery。 validate.min.js

对于每一个，如何在可能被阻止/不可用的实例中恢复使用本地副本？

Answer 1

要确认 cdn 脚本已加载，您可以检查此脚本定义的任何变量/函数是否存在，如果未定义 - 则 cdn 失败，您需要加载本地脚本副本。

基于此原则的解决方案如下：（

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>

如果没有定义的 window.jQuery 属性，则未加载 cdn 脚本）。

您可以使用此方法构建自己的解决方案。例如，jquery 工具提示插件创建 $.tooltip() 函数，因此我们可以使用如下代码检查它：

<script>
    if (typeof $.tooltip === 'undefined') {
        document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>');
    }
</script>

Answer 2

我会研究一个像 yepnopejs 这样的插件，

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}]);

需要一个对象数组来检查，请检查 网站

Answer 3

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

取自 HTML5 样板。

Answer 4

我使用 http://fallback.io/

fallback.load({
        // 包括您的样式表，这可以是样式表数组或字符串！
        page_css: 'index.css',

        // JavaScript 库。关键必须是 LIBARIES 窗口变量！
        JSON: '//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js',

        // 这是一个故障转移示例。第一个将会失败，因此 Fallback JS 将加载第二个！
        jQuery: [
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.FAIL_ON_PUR​​POSE.min.js',
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js'
        ]，......

Answer 5

第一件事 - 你不应该以不同的顺序包含它们吗？

像这样的事情应该有效：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script>jQuery.fn.validate || document.write('<script src="js/jquery.validate.min.js">\x3C/script><script src="js/jquery.validate.unobtrusive.min.js">\x3C/script>'</script>

我在这里所做的只是检查第一个插件（jQ validate）是否已加载。通过检查 jQuery.fn 对象上的静态 validate 函数。我无法以同样的方式检查第二个脚本，因为它没有在任何地方添加任何内容，只是代理现有方法，因此更容易假设如果第一个脚本有效，第二个脚本也将有效 - 毕竟，它们是由相同的 CDN。

Answer 6

您需要知道如何确保库已成功加载。例如：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js">\x3C/script>'</script>

所以这尝试从 google CDN 加载 jQuery (1.5.1)。由于

Answer 7

以下解决方案通过了 HTML5、XHTML 1.0 Transitional 和其他 HTML 风格的验证。将以下内容放在每个外部 JQuery 调用之后。请务必将 jquery.min.js 替换为 JQuery 脚本本地副本的路径。

<script type="application/javascript">window.jQuery || 
document.write(unescape('%3Cscript src="jquery.min.js"%3E%3C/script%3E'))</script>

如果您不使用 unescape，则在使用 http://validator.w3.org 进行验证时会出现错误因为属性规范列表中不允许使用“%”。

HTML5 Boilerplate 示例在与旧版 HTML 一起使用时也存在验证错误：

1. 必需的属性“type”未指定
2. 字符“&”是分隔符的第一个字符，但作为数据出现

如果您仅针对 HTML5 和未来的 HTML 风格进行开发，那么您可以使用 HTML5 Boilerplate 解决方案，但由于您可能会发现自己将部分代码插入到旧版 HTML 中，因此请使用它这种一刀切的方法是安全的。

您需要为每个外部托管脚本指定不同的函数。例如，JQuery Tooltip 插件创建 $.tooltip() 函数，因此您可以使用以下命令检查它：

<script type="application/javascript">typeof ($.tooltip()) !== 'undefined' || 
document.write(unescape('%3Cscript src="jquery.tooltip.min.js"%3E%3C/script%3E'))</script>

Answer 8

我在 jquery ui - 如何使用 google CDN 回答了类似的问题

您可以使用以下方式进行调用

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

。您还可以通过更改主题名称来链接到其他 Ui 主题。在这种情况下，将名称 base 更改为任何其他主题名称 /base/jquery-ui.css 到任何其他主题。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />

查看 jQuery UI 博客，了解所有 CDN 链接 http://blog.jqueryui.com/

如果您想在 Google 失败的情况下恢复到您的主机，您可以这样做

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
    document.write(unescape("%3Cscript src='/jquery.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Answer 9

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>   
<script type="text/javascript">
if(typeof jQval == 'undefined')
{
    document.write(unescape("%3Cscript src='/Scripts/jquery.validate.unobtrusive.min.js' type='text/javascript'%3E%3C/script%3E"));
    document.write(unescape("%3Cscript src='/Scripts/jquery.validate.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

取自 这篇文章

Answer 10

最好使用您自己的 Javascript 代码加载所有脚本。

首先尝试通过将新的 SCRIPT 元素插入 DOM 来加载 CDN 文件。然后通过查找它定义的对象来检查它是否已加载。如果该对象没有出现，则插入另一个 SCRIPT 元素来加载本地副本。也许最好清理 DOM 并删除无法加载的 SCRIPT。

不要忘记考虑计时问题，即加载不是即时的。