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

2020/11/15 01:22 · javascript ·  · 0评论

要确认是否加载了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>

我本来应该研究像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');
    }
  }
}]);

带一个对象数组进行检查,请在现场检查文档

<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

第一件事-您是否应该以不同的顺序包含它们?

这样的事情应该工作:

<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)是否已加载。通过检查validatejQuery.fn对象上的静态函数。我无法以相同的方式检查第二个脚本,因为它没有在任何地方添加任何内容,只是代理现有方法,因此更容易假设如果第一个脚本可以工作,第二个脚本也可以工作-毕竟,它们是由相同的CDN。

我使用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.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>引用本地副本将另一个标签写入文档来进行回退

以下解决方案通过了针对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进行验证时会出现错误,因为在属性规范列表中不允许使用“%”。

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

  1. 未指定必需的属性“类型”
  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>

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

查看jQuery UI Blog,获取所有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>
<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>

摘自本文

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

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

不要忘记考虑时序问题,即负载不是即时的。

本文地址:http://javascript.askforanswer.com/zaicdnbeizuzhi-bukeyongdeqingkuangxiaruhejiazaibendijiaobenwenjianzuoweihoubeizhongfu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!