实施例

Question

前提：我找到了这两个答案，但我不明白我如何在许多图书馆中将其应用于siste：

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或外部服务器上。不幸的是，当用户离线时，Internet连接无法正常工作或存在（CDN）服务器问题，某些库偶尔会无法下载并因此无法加载。

在这种情况下，我想向用户显示“有错误。请重新加载或稍后尝试”的视图。

我的怀疑是：鉴于该库只是在 index.html 中被加载（一些甚至异步）：

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

css （在 head 中）和

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

JS （在正文的末尾）

如何检测即使是单个库的下载（加载）失败？（事实上，假设它因为连接错误而无法加载Angular，整个应用程序将无法正常工作。但我有几个强制库）

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

Answer 1

只需在标记中添加一个onerror处理程序即可。这可以调用后备，给用户一个消息等。

实施例

使用不存在的网址会弹出警告：

＆＃13;

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

＆＃13;

对于自定义功能，只需在链接标记之前的标题中定义脚本块，以便调用自定义函数：

＆＃13;
＆＃13;
<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" >
＆＃13;
＆＃13;
＆＃13;

Answer 2

在这种情况下最有意义的是功能检查。测试是否存在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 3

基于accepted answer。刚刚在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）？

3 个答案:

实施例