如何检测一个或多个 JS/CSS 库加载失败（例如 CDN）？

Question

前提：我找到了这两个答案，但我不明白如何将它系统地应用于许多库：

Detect and log when external JavaScript or CSS resources fail to load

HTML if statement to load local JS/CSS upon CDN failure

我有一个 Augular 1.x 应用程序，它依赖于多个库，其中许多托管在 CDN 或外部服务器上。不幸的是，当用户离线、互联网连接不正常或存在 (CDN) 服务器问题时，某些库偶尔无法下载并因此无法加载。

在这种情况下，我想向用户展示一个类似 "there was an error. Please reload or try later" 的视图。

我的疑问是：鉴于库只是在 [中加载（其中一些甚至异步） =59=] 来自：

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.css">

for css（在head内）和

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>

for JS（在body的末尾）

如何检测单个库下载（加载）失败？（事实上，假设由于连接错误而无法加载Angular，整个应用程序将无法运行。但我有几个强制性库）

或者 我是否应该优先考虑可靠性（即在本地加载库）而不是性能（即缓存的 CDN）？此外，我认为重要的是要明确某些库（例如 Google Apis）无法真正下载 或通过 Bower 安装。

Answer 1

在这种情况下，最有意义的是功能检查。测试是否存在JS对象或JS方法，判断是否加载了JS库，测试是否存在某些CSS规则，判断是否加载了CSS文件

有关演示，请参阅 this Fiddle。

另请参阅下文以了解代码中最相关的部分。

如何判断某个CSS规则是否存在:

window.CSSRuleExists = function(rule) {
    var sSheetList = document.styleSheets;
    for (var sSheet = 0; sSheet < sSheetList.length; sSheet++) {
        var ruleList = sSheetList[sSheet].cssRules;
        for (var item = 0; item < ruleList.length; item ++){
            if(ruleList[item].selectorText === rule) {
                return true;
            }
        }
    }
    return false;
}

如何判断某个JS方法是否存在:

window.JSFunctionExists = function(method, parent) {
    parent = (typeof parent === typeof undefined) ? window : parent;
    return (typeof parent[method] === 'function');
}

如何判断某个JS对象是否存在:

window.JSObjectExists = function(object, parent) {
    parent = (typeof parent === typeof undefined) ? window : parent;
    return (typeof parent[object] === 'object');
}

如何使用这些功能：

function process() {
    el1.innerHTML = CSSRuleExists('button.special');
    el2.innerHTML = JSFunctionExists('CSSRuleList');
    el3.innerHTML = JSObjectExists('location');
}

Answer 2

只需向标签添加一个错误处理程序。这可以调用回退，给用户一条消息等

例子

使用non-existing url会在这里弹出一个提示：

<link 
   onerror="alert('woa, error')" 
   rel="stylesheet" 
   href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.cssx" 
>

对于自定义函数，只需在 header 之前和 link 标记中定义一个脚本块，以便您可以调用自定义函数：

<script>
  function myFunction() {alert("whaaaa.."); /* or something more meaningful */}  
</script>

<link 
   onerror="myFunction()" 
   rel="stylesheet" 
   href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.cssx" 
>

Answer 3

基于。刚刚在 Firefox、Edge（新版）、Chrome 和 Opera 上测试。

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>

    <script>
        function CssOrScriptFallBack(el) {
            if (el instanceof HTMLScriptElement || el instanceof HTMLLinkElement) {
                let Url = el.getAttribute('data-fallback');
                if (Url) {
                    let attr = el instanceof HTMLScriptElement ? 'src' : 'href';
                    el.setAttribute(attr, Url);
                }
            }
        }
    </script>

    <link href='https://not-working-cdn/file-name.min.css' rel='stylesheet'  
          onerror='CssOrScriptFallBack(this)' 
          data-fallback='/css/file-name.min.css' /> 

</head>
<body>
    ...
</body>
</html>

如何检测一个或多个 JS/CSS 库加载失败（例如 CDN）？

How to detect when one or more JS/CSS library fail to load (e.g. CDN)?

javascript

css

cdn

例子