I have two versions of the same html page that are identical except one has the JavaScript included and the other reads the exact same JavaScript from a file. The included version works and the referenced version fails.
Both versions used to work, the error seems to be related to my adding code to get a list of the available animations from the stylesheets. The CSS files with the keyframe animations in them are likewise either included or by reference, corresponding to whether the JavaScript is.
Also note I am testing using file:/// not https://.
Referenced Version Snippet Fails
...
<link rel="stylesheet" href="css/lib/normalise.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/anim.css">
<link rel="stylesheet" href="css/lib/animate.min.css">
...
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Included Version Snippet Works
...
<style>
... inline CSS rules including keyframes
</style>
...
<script type="text/javascript">
console.log('>>> BEGIN READING');
// ... code here ommitted, it works
function getAnimationList(){
// Return a list of all of the animation keyframe names in all style sheets.
var ss = document.styleSheets;
var anims = [];
// loop through all the style sheets
for (var s = 0; s < ss.length; s++) {
if (ss[s].cssRules) { <<<**LINE 32**: ERROR OCCURS IN REFERENCED VERSION
// loop through all the rules
for (var r = ss[s].cssRules.length - 1; r >= 0; r--) {
var rule = ss[s].cssRules[r];
if ((rule.type === window.CSSRule.KEYFRAMES_RULE || rule.type ===
window.CSSRule.WEBKIT_KEYFRAMES_RULE)) {
anims.push(rule);
}
}
}
}
return anims;
};
animList = getAnimationList();
if (animList.length == 0){
console.log('>>> No Animations');
} else {
console.log('>>> Number of animations is ' + animList.length);
};
// ... more code follows, ommitted for brevity
</body>
</html>
The error message varies by browser used as follows.
Firefox Error
Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet script.js:32
getAnimationList file:///C:/Users/mark/OneDrive/dev/babyclix/web/js/script.js:32
<anonymous> file:///C:/Users/mark/OneDrive/dev/babyclix/web/js/script.js:45
Edge Error
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at getAnimationList (file:///C:/Users/mark/OneDrive/dev/babyclix/web/js/script.js:32:19)
at file:///C:/Users/mark/OneDrive/dev/babyclix/web/js/script.js:45:12
Chrome Error
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at getAnimationList (file:///C:/Users/mark/OneDrive/dev/babyclix/web/js/script.js:32:19)
at file:///C:/Users/mark/OneDrive/dev/babyclix/web/js/script.js:45:12
Can anyone see why the CSSRules statement would throw an error. Firefox thinks cross-domain but everything is being served from the same folder. It should make no difference if the JavaScript is included or referenced!
