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

IT技术 javascript cdn fallback
6个回答

要确认加载了 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 插件创建了$.tooltip()函数,所以我们可以用这样的代码检查它:

<script>
    if (typeof $.tooltip === 'undefined') {
        document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>');
    }
</script>
对于任何想知道作者为什么使用 的人来说\x3c,这是因为否则</script>会过早地结束脚本。
2021-03-12 09:21:17
<\/script> 工作正常,也是。
2021-03-12 09:21:17
这也是有效的,有很多方法可以检查存在。我喜欢typeof支票,它们是防弹的
2021-03-14 09:21:17
为什么不if ($.tooltip === undefined)呢?
2021-04-01 09:21:17
的使用document.write是不推荐。document.write脚本的网络请求可能被浏览器阻止:developers.google.com/web/updates/2016/08 /... & chromestatus.com/feature/5718547946799104
2021-04-03 09:21:17

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

获取要检查的对象数组,请查看站点上的文档

不错的解决方案。从文档看来,您似乎仍然需要测试一个对象:yepnope([{ test : /* boolean(ish), .... 所以似乎@raklos 你需要找出一个对象来测试。
2021-03-12 09:21:17
但是complete如果load失败事件会被触发吗?看起来很尴尬:-)
2021-03-16 09:21:17
在加载/未加载所有文件后,无论成功或失败,Complete 都会触发。加载(或不加载)单个文件后会触发回调。
2021-03-20 09:21:17
@Capsule - 好问题。从文档看来,您可以使用callback: function (url, result, key) {...}它在加载或超时时触发。可以覆盖默认超时。我不能说我已经尝试过了,但看起来它可能值得尴尬;)
2021-03-21 09:21:17
2015 年注释:不推荐使用 yepnope :(
2021-03-21 09:21:17
<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

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

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

这样的事情应该工作:

<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 验证)。通过检查validatejQuery.fn 对象上的静态函数。我不能用同样的方式检查第二个脚本,因为它没有在任何地方添加任何东西,只是代理现有的方法,所以更容易假设如果第一个有效,第二个也将有效 - 毕竟,它们是由同一个 CDN。

您可以使用“window.jQuery.validator.unobtrusive”测试不显眼。我在这里找到了测试:house9.blogspot.com/2011/03/...
2021-03-13 09:21:17