引入外部 CDN失效时--怎么加载本地资源文件(本文以jquery为例)
相信大家都使用过CDN静态资源库,比如下面
staticfile CDN:http://staticfile.org (由国内优秀的云存储服务商七牛云提供存储和加速赞助)
BootCDN:https://www.bootcdn.cn/ (Bootstrap中文网支持并维护的前端开源项目免费 CDN 服务)
CDN官方静态资源库:https://cdnjs.com/
使用CDN可以减少带宽和http请求,也可以减少一些服务器的压力,从而提升页面加载速度,用户体验也会更好。
但有一个问题:假如你使用的是百度静态资源库。
某天,突然百度静态资源库崩了,那你网站引用的相应资源文件也会失效。这个时候应该怎么办呢?
虽然这种情况几率比较小,但为了防范于未然,我们还是需要留一手。
然后我就开始百度方法,真是五花八门,各种写法都有,看的我是很蒙蔽
有这种:
<script src="//ajax.google/jquery/1.9.2.js"></script>
<script>window.jQuery||document.write('<script src="jquery-1.9.2.js"></script>')</script>
有这种:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
有这种:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>
<script>
//<![CDATA[
if(typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));
} //]]>
</script>
不知为何,总觉得以上写法哪里不对,但又说不出个所以然。后经过一番寻找,终于找到了比较规范和正确的2种方法
方法一(推荐)
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/skin/mobile/js/jquery.min.js'%3E%3C/script%3E"));
}
</script>
方法二
<script src="http://lib.sinaapp.com/js/jquery11/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape("%3Cscript src='/skin/mobile/js/jquery.min.js'%3E%3C/script%3E"))</script>
注:经本人实际测试,2种方法都可以。
然后这里我又有一个疑问:不知道上面代码中的 %3C 和 %3E是什么意思?
后来先查了 unescape()这个函数 , 接着又查了这个函数escape()
结果发现 %3C 和 %3E分别表示 '<' 和 '>',如下图


原文参考:https://www.jb51.net/article/140694.htm
引入外部 CDN失效时--怎么加载本地资源文件(本文以jquery为例)的更多相关文章
- 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件
原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...
- 填补Resources和WWW加载本地资源的坑
总的来说Resources和WWW加载本地资源坑比较多,大多与路径有关. 下面代码构成了一个路径的预读模块: 此模块主要解决的坑是:Resources或WWW加载本地的文件夹中的多个文件时,无法获取文 ...
- 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
- iOS webView 远程html加载本地资源
昨天,一个朋友让我帮他在IOS上弄这样一件事情: webView 调用远程URL,并且让远程的web 通过自定义标签能实现内嵌本地的图片.js 或音频等. 比如:在服务器端 的html文件中 这样写到 ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- iOS WebView 加载本地资源(图片,文件等)
https://www.cnblogs.com/dhui69/p/5596917.html iOS WebView 加载本地资源(图片,文件等) NSString *path = [[NSBundle ...
- Mysql加载本地CSV文件
Mysql加载本地CSV文件 1.系统环境 系统版本:Win10 64位 Mysql版本: 8.0.15 MySQL Community Server - GPL Mysql Workbench版本: ...
- UIWebView加载本地html文件
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight-)]; ...
- WebView加载本地Html文件并实现点击效果
Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...
随机推荐
- tkinter中scale拖拉改变值控件(十一)
scale拖拉改变值控件 使用户通过拖拽改变值 简单的实现: import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya. ...
- tkinter属性(总结)
一.主要控件 1.Button 按钮.类似标签,但提供额外的功能,例如鼠标掠过.按下.释放以及键盘操作事件 2.Canvas 画布.提供绘图功能(直线.椭圆.多边形.矩形) 可以包含图形或位图 3.C ...
- 『网络の转载』px与em的区别
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- Python hashlib 无法打印
# !/user/bin/python # -*- coding: utf-8 -*- import hashlib # 可提供MD5算法 , 防止内页被篡改 (若内页未被篡改, MD5的值是不变的) ...
- counter.go
package engine func (engine *Engine) NumTokenIndexAdded() uint64 { return engine.numTokenIndexAd ...
- lease.go
package ) type:]...) :]...) )*time.Second) ) go func() { select { case <-stop ...
- 记录一波由会话堵塞导致tomcat应用故障事件
一.故障基本信息 发生时间 消除时间 故障历时 故障类别 影响 2018-5-17 18:14:30 2018-05-18 08:58:15 16小时 应用故障 业务瘫痪,用户投诉 二.故障现象 AP ...
- IOS-QQ第三方登录
iOS QQ第三方登实现 我们经常会见到应用登陆的时候会有QQ,微信,微博等的第三方登陆 如图: 下面我们主要讲一下qq的第三方登陆如何实现 首先,到官网注册: http://wiki.conne ...
- IE浏览器下ajax和缓存的那些事儿
项目经理最近返回了一些问题: (客户浏览器为IE11,本地360,谷歌没发现任何问题) 1.加载页面时下拉框中没有数据,关闭之后再打开出现数据: 2.数据保存之后页面没有刷新: 我也是接手别人的项目, ...
- 旅行app(游记、攻略、私人定制) | 顺便游旅行H5移动端实例
<顺便游旅行>是一款H5移动端旅行app,提供目的地(国内.国外.周边)搜索.旅游攻略查询.游记分享.私人定制4大模块,类似携程.同程.去哪儿.马蜂窝移动端,只不过顺便游app界面更为简洁 ...