HTML if 语句在 CDN 失败时加载本地 JS/CSS

2024-05-09

当从 CDN 或任何外部服务器加载 CSS/JS 文件时,有可能(即使概率很低)由于外部故障而丢失该文件。在这种情况下,html 页面将因缺乏适当的 CSS 和 JS 而被损坏。

有没有一种实用的方法可以在 CDN 故障时加载本地版本?

<link rel="stylesheet" href="http://cdn.com/style.css" type="text/css" />
IF (not loaded style.css){
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
}

对于 JS 来说这样做会更容易,因为我们可以测试 JS 函数(在 JS 文件中提供);然后,失败时加载本地文件。例如,测试 jQuery 库是否可用。

不过,我很好奇是否有一个实用的方法!


我会这样做。

在样式表中创建一个类ui-helper-hidden然后添加一个 div 作为页面上的第一个元素;

<body><div class="ui-helper-hidden"></div><!-- rest of html --></body>

检查并确保您的 CDN javascript 文件已加载后,然后使用这段代码注意我正在使用jquery

<script>
    // CSS Fallback
    $(function () {
        if ($('.ui-helper-hidden:first').is(':visible') === true) {
            $('<link rel="stylesheet" type="text/css" href="/pathtocss/nameofstylesheet.css" />').appendTo('head');
        }
    });
</script>

这将检查应该隐藏的元素是否存在。如果它没有隐藏,那么您就知道您的 css 文件尚未从 CDN 加载。

我用这个方法通过 CDN 的 jQuery 和 jQuery UI http://timjames.me/jquery-and-jquery-ui-fallbacks

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML if 语句在 CDN 失败时加载本地 JS/CSS 的相关文章

  • Opera 中 margin-bottom 的计算方式不同

    我有一个具有相对位置的 div 和一个具有绝对位置的子 div div class out div div div CSS container width 100px height 100px position relative insid
  • 使绝对定位的div扩展父div高度

    正如你在下面的 CSS 中看到的 我想要child2将自己定位在之前child1 这是因为我目前正在开发的网站也应该在移动设备上运行 在移动设备上child2应该位于底部 因为它包含我想要在移动设备上的内容下方的导航 为什么不是 2 个母版
  • 在Javascript中将RGB数组转换为RGBA数组的快速方法

    我正在使用的模拟器在内部存储 RGB 值的一维帧缓冲区 但是 HTML5 画布在调用 putImageData 时使用 RGBA 值 为了显示帧缓冲区 我当前循环遍历 RGB 数组并以某种方式创建一个新的 RGBA 数组与此类似 https
  • Moment.js 动态更新时间(以秒为单位)

    我试图显示时钟 that 每秒更新一次 e g 2015 年 1 月 5 日 12 05 01 它似乎对我来说工作得很好 对于相同的代码 并且只有 moment min js 指向v2 11 0 看看代码 来源 MilkyWayJoe va
  • Webpack - 资产大小限制中的警告:以下资产超出了建议的大小限制 (244 KiB)

    当我在生产模式下运行 webpack 时 有资产规模限制 超出 的警告 我怎样才能运行而不出现这个错误 在我的项目中 我包含 css 并且我看到 webpack 构建中包含一些 node module 目录 但是如果我排除 css 的 no
  • 如何去除html源代码中的空格

    我正在使用 django 和 python 在模板文件中 我有一个下拉列表 如下所示 有用 唯一的问题是源 html 代码之间有很多空白 有什么办法可以去除空白吗 谢谢 for lang ele in video languages all
  • 将屏幕宽度获取到 javascript 变量中并通过 ajax 将其发送到 php 页面以避免页面加载

    这是JS检测我的页面命名上的屏幕分辨率index html并将其发送到 php 以便可以使用以下方式检索值 GET 这是我的PHP文件命名的内容process php
  • Flask 和 Reactjs 抛出 JSX 转换错误

    我已经开始将 ReactJS 与 Python Flask 后端结合使用 通过 Flask 渲染模板时 我在 Chrome 控制台中收到以下客户端错误 错误 找不到模块 jstransform visitors es6 templates
  • 如何处理 setTimeout() 的多个实例?

    阻止创建 setTimeout 函数的多个实例 在 JavaScript 中 的最推荐 最佳方法是什么 一个例子 伪代码 function mouseClick moveDiv div 0001 mouseX mouseY function
  • 构建两列 html 表单的最佳方法?

    对齐以下内容的最佳方法是什么 我想要 inputTitle左边和右边inputInput在右边 两者之间有错误 CSS crud form width 430px margin 10px solid font family Verdana
  • Intern JS - 如何在链式 Command 方法中使用 Promise.all()?

    我是用 Intern JS 编写测试的新手 并且一直在遵循他们的文档来使用对象接口 https theintern github io intern interface object and 页面对象 https theintern git
  • 从函数在 python 3 中创建全局变量

    我想知道为什么在函数结束后我无法访问变量 variable for raw data 代码是这样的 def htmlfrom Website URL import urllib request response urllib request
  • 禁用移动设备上的锚点菜单点击

    我使用嵌套列表作为带有子菜单项的菜单 我曾经这样做过 如果您将鼠标悬停在主菜单项上 子菜单项将通过将显示从无更改为块来出现 我决定让子菜单看起来就像是下拉的 并使用了 CSS 过渡 我遇到的问题是 在第一种方法中 如果您触摸 iPad 上的
  • React Router Tabs——保持组件安装

    我使用 React Router 创建了选项卡 每个选项卡都有不同的路线 但是 我想通过保持隐藏选项卡的安装来维护选项卡转换之间的选项卡状态 我该如何实现这一目标 每次路由切换时 React 路由器都会重新安装每个组件 已经有人问过这个问题
  • 如何在react.js中将/n替换为换行符?

    我正在尝试更换每一个 n to a br tag in ReactJS In my note note对象有一个包含多个的字符串 n in it 示例注释 注释 test ntest ntest 我尝试过的ReactJS note note
  • javascript 闭包和对象引用

    我的情况有点晦涩难懂 主要是因为我认为我已经掌握了闭包 所以基本上我想要的是将集合重置为默认值 假设我有一个集合 它具有带有对象参数数组的构造函数 var c new collection x y z 然后集合定期更新 因为我没有保留数组的
  • javascript从字符串创建不区分大小写的正则表达式

    我试图通过以不区分大小写的方式将输入与正则表达式匹配来进行验证 正则表达式作为对象上的字符串从服务中下来 我可能会得到类似的东西 regex ane 我可以执行以下操作 var rx new RegExp object regex The
  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • “memset”没有 DLL 那么如何 ctype 它

    如何使用memset在 jsc 类型中 没有对应的 DLL 我搜索 搜索了 js ctype 代码 但找不到要破解的示例 如果你只是想memset一个数组为零字节 然后我有 好消息 大家 js ctypes 会将新数组初始化为零 否则 最简
  • 用于替换前 5 个数字的正则表达式,无论它们之间有什么?

    我正在努力实现以下匹配 Input 123 45 6789 123456789 1234 正则表达式尝试输出 d 5 123 45 6789 123456789 1234 d 2 3 123 45 6789 123456789 1234 d

随机推荐

  • 当脚本是从加载的脚本动态创建的 DOM 节点时,脚本 onload 和 window.onload 的顺序是否定义良好?

    File loader js function main if typeof window undefined var script window document createElement script script src https
  • 使用 AdHocWorkspace 会导致“不支持语言‘C#’”。

    在VS2015中使用Microsoft CodeAnalysis CSharp Workspaces的RC2 这段代码会抛出异常 var tree CSharpSyntaxTree ParseText var workspace new A
  • 选择表中的人员并排除妻子,但合并他们的名字

    我有一张桌子Person PersonID FirstName LastName 1 John Doe 2 Jane Doe 3 NoSpouse Morales 4 Jonathan Brand 5 Shiela Wife And a R
  • ansible:基于 extra-vars 文件的任务顺序

    我有包含 10 个任务的 ansible 剧本 任务的顺序因用例而异 因此我必须为每个用例创建 extraVar yml 文件 并且 extraVar yml 将定义任务的顺序 怎么做 Example 剧本 tasks name task1
  • Flash 未在调试播放器中显示错误/堆栈跟踪(firefox/chrome/whatnot)

    我正在尝试调试在线默默地失败的应用程序 我 100 确定我正在运行 Flash 调试播放器 为了确保我不会丢失它 我故意抛出一个错误 但 Flash 在浏览器中没有显示任何 stracktrace 我快要失去它了 有什么线索吗 我正在 ch
  • 无法使用docker在Apple Mac芯片M1上启动elasticsearch

    在发布这个问题之前 我浏览了许多链接 例如 Kibana 无法在 Mac M1 上使用 docker 连接到 ElasticSearch https stackoverflow com questions 73160632 kibana c
  • Crystal Report:如何计算一个公式中的多个 IF 语句?

    背景 我正在尝试对报告的详细信息行进行一些美观的验证 我有几个名为 Assert 语句的公式 如果测试失败则返回 false 如果通过则返回 true Goal 我想创建一个存储 违反规则 的数组 然后将它们显示在行末尾的字段中 标题为 违
  • 如何使用数据库在 Django 中的应用程序之间交换数据?

    我正在使用 Django 在网络上工作 我创建了 2 个应用程序 第一个用于客户端注册并将其数据添加到数据库 第二个应用程序供用户访问和查看交互界面 这个想法是使用第二个应用程序从数据库中的客户端获取数据 并使用它向用户显示一些信息 我的问
  • 页面加载时显示扩展库对话框?

    有没有办法在我的页面加载时显示扩展页面对话框 Add a
  • 向量化 numpy bincount

    我有一个 2d numpy 数组 A我要申请np bincount 到矩阵的每一列A生成另一个二维数组B由原始矩阵每列的 bincounts 组成A 我的问题是 np bincount 是一个采用一维数组的函数 它不是像这样的数组方法B A
  • 使用 cURL 从 shell 发布 4GB 文件

    我尝试将文件大小为 4GB 的文件发布到 REST API cURL 不会上传此大小的文件 而是 POST 内容长度为 0 的文件 curl v i d work large png H Transfer Encoding chunked
  • 在VisualStudio DTE中,如何获取ActiveDocument的内容?

    我正在 VisualStudio 中编写脚本 并尝试获取当前 ActiveDocument 的内容 这是我当前的解决方案 var visualStudio new API VisualStudio 2010 var vsDTE visual
  • 获取证书链

    我正在 Java 中使用 X509 证书 给定一个证书 是否可以在签名层次结构中找到所有其他证书 直到找到根证书 我有一个证书文件 带有 cer扩展名 我想提取父签名证书 我想继续查找该证书的父证书 直到获得最终的自签名根证书 我已经检查了
  • 在 Magento 控制器中使用 move_uploaded_file

    我是 magento 的新手 我正在 magento 管理中创建用于文件上传的自定义模块 现在我已将上传文件发布到我的模块控制器中 这里我用过move uploaded file将文件上传到与控制器文件夹相同的目录中 下面的代码我用于控制器
  • 可观察集合未因 UI 更改而更新

    我正在尝试将可观察集合绑定到用户控件 但它不会在用户更改时更新 但在通过代码更改用户控件时它会更新 以下是我尝试过的一个例子 它可能有点长 但它正在运行 因此您可以按原样复制并粘贴代码 请参阅帖子末尾我的问题 客户 cs using Sys
  • 如何用 C 语言练习 Unix 编程?

    经过五年的专业 Java 以及较小程度上的 Python 编程并慢慢感觉到我的计算机科学教育逐渐消失 我决定要拓宽我的视野 对世界的一般用处 并做一些 对我来说 感觉更重要的事情就像我真的对机器有影响一样 我选择学习 C 和 Unix 编程
  • 引用生成的类名的 JSS 语法是什么?

    Material UI 在其核心使用 JSS 有时您需要覆盖其基本组件的样式 示例来自Input https github com mui org material ui blob next packages material ui src
  • 如何获取队列中的第 n 个项目?

    我的应用程序中有许多队列和优先级队列 我想轻松访问这些队列中的第 n 个项目 但没有看到使用 API 实现此目的的简单方法 我想我可以创建一个Iterator并迭代到第 n 个元素或使用toArray index 但似乎应该有一个更简单的方
  • 替换 Javascript 中的引号?

    对于我正在制作的网络应用程序 我将收到文本字符串 其中偶尔包含引号 因为我接下来要 document writing 字符串 所以需要将它们更改为撇号或转义 我该怎么做 因为当我尝试时它似乎不起作用 特别是我认为因为字符串的引号阻止了脚本的
  • HTML if 语句在 CDN 失败时加载本地 JS/CSS

    当从 CDN 或任何外部服务器加载 CSS JS 文件时 有可能 即使概率很低 由于外部故障而丢失该文件 在这种情况下 html 页面将因缺乏适当的 CSS 和 JS 而被损坏 有没有一种实用的方法可以在 CDN 故障时加载本地版本 IF