How To Detect When One Or More Js/css Library Fail To Load (e.g. Cdn)?
Premise: I've found these two answers but I don't understand how I can sistematically apply it for many libraries: Detect and log when external JavaScript or CSS resources fail to
Solution 1:
What makes most sense in this case, is a feature check. Test for the existence of JS objects or JS methods to find out if a JS library has been loaded and test for the existence of certain CSS rules to find out if a CSS file has been loaded.
See this Fiddle for a demo.
See also below for the most relevant parts of the code.
How to find out whether a certain CSS rule exists :
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) {
returntrue;
}
}
}
returnfalse;
}
How to find out whether a certain JS method exists :
window.JSFunctionExists = function(method, parent) {
parent = (typeof parent === typeofundefined) ? window : parent;
return (typeof parent[method] === 'function');
}
How to find out whether a certain JS object exists :
window.JSObjectExists = function(object, parent) {
parent = (typeof parent === typeofundefined) ? window : parent;
return (typeof parent[object] === 'object');
}
How to use these functions :
function process() {
el1.innerHTML = CSSRuleExists('button.special');
el2.innerHTML = JSFunctionExists('CSSRuleList');
el3.innerHTML = JSObjectExists('location');
}
Solution 2:
based on the accepted answer. Just tested on Firefox, Edge (the new one), Chrome and Opera.
<!DOCTYPE html><htmllang="en-US"><head><metacharset="utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>Home</title><script>functionCssOrScriptFallBack(el) {
if (el instanceofHTMLScriptElement || el instanceofHTMLLinkElement) {
letUrl = el.getAttribute('data-fallback');
if (Url) {
let attr = el instanceofHTMLScriptElement ? 'src' : 'href';
el.setAttribute(attr, Url);
}
}
}
</script><linkhref='https://not-working-cdn/file-name.min.css'rel='stylesheet'onerror='CssOrScriptFallBack(this)'data-fallback='/css/file-name.min.css' /></head><body>
...
</body></html>
Post a Comment for "How To Detect When One Or More Js/css Library Fail To Load (e.g. Cdn)?"