为啥内联 JavaScript 在引用 JavaScript 错误时起作用 [重复]

Posted 2023-03-04

【中文标题】为啥内联 JavaScript 在引用 JavaScript 错误时起作用 [重复]

【英文标题】：Why does inline JavaScript work while referenced JavaScript errors [duplicate]为什么内联 JavaScript 在引用 JavaScript 错误时起作用 [重复]

【发布时间】：2021-04-02 14:18:10

【问题描述】：

我有两个相同的 html 页面版本，除了一个包含 javascript，另一个从文件中读取完全相同的 JavaScript。包含的版本有效，引用的版本失败。

两个版本都可以正常工作，该错误似乎与我添加代码以从样式表中获取可用动画列表有关。包含关键帧动画的 CSS 文件同样被包含或引用，对应于 JavaScript 是否存在。

另请注意，我正在使用 file:/// 而不是 https:// 进行测试。

引用的版本片段失败

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

包含的版本片段作品

...
<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.Cs-s-rule.KEYFRAMES_RULE || rule.type === 
                          window.Cs-s-rule.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>

错误信息因使用的浏览器而异，如下所示。

Firefox 错误

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

边缘错误

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 错误

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

谁能明白为什么 Cs-s-rules 语句会抛出错误。 Firefox 认为是跨域的，但所有内容都来自同一个文件夹。是否包含或引用 JavaScript 应该没有区别！

【问题讨论】：

可能重复：***.com/questions/48753691/… 简而言之，file:// 无法做到这一点。请改用本地开发服务器。

@lastr2d2 谢谢你解决了我的问题。现在使用 Apache 进行测试，它可以工作。

【参考方案1】：

我遇到了类似的问题，但这与 CSS 无关，但我认为这可能会帮助您解决问题。

首先，我注意到您的工作目录位于 OneDrive 目录中，这会在尝试加载文件时导致一些阻塞。不久前我遇到了这个问题，我通过将项目移出 OneDrive 目录来解决它。

尝试将您的项目目录移出 OneDrive 并检查错误是否仍然存在？

【讨论】：

谢谢，您的解决方案可能有效，我没有尝试过，但我遵循了@lastr2d2 的建议，并且确实有效。问候