如何检测一个或多个JS/CSS库何时无法加载(例如CDN)？

Question

前提:我已经找到了这两个答案,但我不明白我如何在许多库中对其进行sistematically应用:

检测并记录外部JavaScript或CSS资源无法加载的时间

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

我有一个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(头部)和

<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处理程序即可.这可以调用后备,给用户留言等.

例

使用不存在的URL将在此处弹出警报:

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

对于自定义函数,只需在链接标记之前的标题中定义脚本块,以便可以调用自定义函数:

<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 2

在这种情况下最有意义的是功能检查.测试是否存在JS对象或JS方法,以确定是否已加载JS库并测试是否存在某些CSS规则以查明是否已加载CSS文件.

请参阅此小提琴进行演示.

有关代码中最相关的部分,请参见下文.

如何确定是否存在某个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');
}