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

作者: v-star*위위
发布时间: 2025-01-01 10:08:11 (2月前)
转自：

11 条回复

0#
回复此人
苞米地里的蒙面妖 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要确认加载了cdn脚本，您可以检查是否存在此脚本定义的任何变量/函数，如果它未定义 - 则cdn失败并且您需要加载本地脚本副本。 </p> <P> 基于这个原则是基于这样的解决方案： </p> <pre> <code> <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> </code> </pre> <P> （如果没有window.jQuery属性定义的cdn脚本没有加载）。 </p> <P> 您可以使用此方法构建自己的解决方案。例如，jquery工具提示插件创建 <code> $.tooltip() </code> 函数，所以我们可以用这样的代码检查它： </p> <pre> <code> <script> if (typeof $.tooltip === 'undefined') { document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>'); } </script> </code> </pre> </DIV>

编辑
1#
回复此人
雨儿 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 第一件事 - 你不应该以不同的顺序包括它们吗？ </p> <P> 这样的事情应该有效： </p> <pre> <code> <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> </code> </pre> <P> 我在这里做的只是检查是否已加载第一个插件（jQ validate）。通过检查静态 <code> validate </code> 函数jQuery.fn对象。我无法以相同的方式检查第二个脚本，因为它不会在任何地方添加任何内容，只是代理现有方法，因此更容易假设如果第一个脚本有效，第二个脚本也可以工作 - 毕竟，它们是由相同的CDN。 </p> </DIV>

编辑
2#
回复此人
永远的记忆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您需要知道，如何确保成功加载了lib。例如： </p> <pre> <code> <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> </code> </pre> <P> 因此，这可以从谷歌CDN加载jQuery（1.5.1）。以来 <code> <script> </code> 标签会阻止整体渲染和放大执行过程（如果没有明确说明不同），我们可以在之后检查，如果 <code> jQuery </code> 找到对象 <code> window </code> 。如果没有，只需写下另一个即可 <code> <script> </code> 标记到文档中，引用本地副本。 </p> </DIV>

编辑
3#
回复此人
记忆短浅♡思念不变 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <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> </code> </pre> <P> 取自 <a href =“http://weblogs.asp.net/jgalloway/archive/2010/01/21/using-cdn-hosted-jquery-with-a-local-fall-back-copy.aspx"rel =” nofollow的“> 本文 </A> </p> </DIV>

编辑
4#
回复此人
产品你是狗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我用 <a href="http://fallback.io/" rel="nofollow"> http://fallback.io/ </A> </p> <BLOCKQUOTE> <pre> <code> 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' ], ....... </code> </pre> </BLOCKQUOTE> </DIV>

编辑
5#
回复此人
拥有小太阳的向日葵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我回答了类似的问题 <a href="https://stackoverflow.com/questions/5206666/jquery-ui-how-to-use-google-cdn"> jquery ui - 如何使用谷歌CDN </A> </p> <P> 你可以使用 </p> <pre> <code> <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> </code> </pre> <P> 您还可以通过更改主题名称链接到其他Ui主题。在这种情况下，将名称库更改为任何其他主题名称 <code> /base/jquery-ui.css </code> 任何其他主题。 </p> <pre> <code> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> </code> </pre> <P> 查看jQuery UI博客，获取所有CDN链接的链接 <a href="http://blog.jqueryui.com/" rel="nofollow noreferrer"> http://blog.jqueryui.com/ </A> </p> <P> 如果您想要在Google失败的情况下还原到您的主机，您可以这样做 </p> <pre> <code> <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> </code> </pre> </DIV>

编辑
6#
回复此人
CTO啊哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 最好用你自己的Javascript代码加载所有这个脚本。 </p> <P> 首先尝试通过在DOM中插入新的SCRIPT元素来加载CDN文件。然后通过查找它定义的对象来检查它是否已加载。如果没有出现该对象，则插入另一个SCRIPT元素以加载本地副本。可能最好清理DOM并删除无法加载的SCRIPT。 </p> <P> 不要忘记考虑时间问题，即负载不是即时的。 </p> </DIV>

编辑
7#
回复此人
Innate Mind | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果相关的CDN真的被过滤掉，我认为任何解决方案都不会毫无痛苦。（例如iptables / drop，配置错误的路由器。）如果你不相信他们在本地使用所有东西...而且你在异国情调的网络上给用户带来一些惊喜/来电。 </p> </DIV>

编辑
8#
回复此人
Charizard | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <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> </code> </pre> <P> 取自HTML5 <a href="http://html5boilerplate.com/" rel="noreferrer"> 样板 </A> 。 </p> </DIV>

编辑
9#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我会调查一个插件 <a href="http://yepnopejs.com" rel="noreferrer"> yepnopejs </A> </p> <pre> <code> 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'); } } }]); </code> </pre> <P> 获取要检查的对象数组，检查文档 <a href="http://yepnopejs.com" rel="noreferrer"> 现场 </A> </p> </DIV>

编辑

登录后才能参与评论