如何在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 Boilerplate.

Answer 4

我使用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'
        ],   .......