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

我使用 CDN 来执行以下 javascript:

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

98961 次浏览
小开

您需要知道，如何确保一个 lib 被成功加载。例如:

<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)。由于 <script>标签确实阻塞了整个渲染和执行过程(如果没有明确告知不同) ，我们可以在此之后立即检查 jQuery对象是否在 window中找到。如果没有，只需在文档中写入另一个 <script>标记，引用本地副本即可。

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

取自 这篇文章

小开

首先，你不应该把它们按不同的顺序排列吗？

这种方法应该可行:

<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 验证)是否已经加载。通过检查 jQuery.fn 对象上的静态 validate函数。我不能以同样的方式检查第二个脚本，因为它没有在任何地方添加任何东西，只是代理现有的方法，所以很容易假设如果第一个脚本可以工作，那么第二个脚本也可以工作——毕竟，它们是由同一个 CDN 提供的。

小开

我会研究像 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');
}
}
}]);

获取要检查的对象数组，检查 工地上的文档

小开
最佳答案

要确认加载的 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>
小开 
<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 例行公事。

小开

我在 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/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" />

在 jQueryUIBlog 中可以找到所有 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>
小开

最好使用您自己的 Javascript 代码来完成所有这些脚本加载。

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

不要忘记考虑时间问题，即负载不是即时的。

小开

下面的解决方案通过了 HTML5、 XHTML 1.0过渡和其他 HTML 风格的验证。在每个外部 JQuery 调用之后放置以下内容。确保用 JQuery 脚本的本地副本的路径替换 JQuery.min.js。

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

我用 http://fallback.io/

  fallback.load({
// Include your stylesheets, this can be an array of stylesheets or a string!
page_css: 'index.css',


// JavaScript library. THE KEY MUST BE THE LIBARIES WINDOW VARIABLE!
JSON: '//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js',


// Here goes a failover example. The first will fail, therefore Fallback JS will load the second!
jQuery: [
'//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.FAIL_ON_PURPOSE.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'
],   .......

提交答案