javascript - CDN 回退问题

Question

我很困惑是否使用 cdn，所以我浏览了这些链接 link1和 link2

他们告诉我们使用本地脚本作为 CDN 的后备

所以我保留了这个代码

    <script src="https://secure.skypeassets.com/i/scom/js/skype-uri.js" async></script>
    <script>
    window.Skype || document.write('<script src="javascripts/skype-uri.js" async>\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
    window.angular || document.write('<script src="javascripts/angular.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script>
    window['angular-animate'] || document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script>
    window['angular-aria'] || document.write('<script src="javascripts/angular-aria.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
    <script>
    window['angular-material'] || document.write('<script src="javascripts/angular-material.min.js">\x3C/script>')
    </script>

问题是它获取本地文件并从 CDN 获取相同的文件。

当我点击页面并通过 charles proxy(或任何其他网络监控工具)进行监控

有点奇怪，但我无法弄清楚这里的问题。

Answer 1

使用 window.angular || /* fallback code*/ 的脚本后备看起来不错并且应该可以工作(对我有用)。

请记住，测试并不引用脚本名称，而是检查在脚本已加载时应设置的已知全局变量是否确实存在。因此，对于其他脚本，您需要知道它们设置了哪些全局变量(如果有)或它们向现有对象添加了哪些方法/属性并检查它们。

顺便说一下async Skype 脚本上的 flag 将破坏此类测试，因为在浏览器获取并解析外部脚本之前，很有可能会执行对 Skype 的检查。

至于样式表回退，这工作得很好(即使本地副本也失败 - 浏览器以某种方式处理这个问题；)):

<link rel="stylesheet" href="//cdnurl/style.css" onerror="this.href='localcopy.css'" />

编辑:要检查 Angular 模块，您可以使用 angular.module('moduleName')在 try-catch block 中(受到 this answer 的启发):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
<script>
try {
  angular.module('ngAnimate')
} catch(e){
  document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
}
</script>