Question

这是一个简单的问题示例：

<html>
<head>
<link rel='stylesheet' href='myStyle.css'>
<script>
window.onload=function(){
    try{
        alert(document.styleSheets[0]); // works
        alert(document.styleSheets[0].cssRules); // doesn't even print undefined
    }catch(e){alert(e)} // catch and alert the error
}
</script>
</head>
<body>
</body>
</html>

myStyle.css body{background-color:green;}

如果您使用<style></style>

，

脚本可以正常工作

解：
1.当文件在线/ localhost时工作 2.适用于其他浏览器（即Internet Explorer，Microsoft Edge，Firefox）
3. chrome --allow-file-access-from-files

Answer 1

TL; DR：从Chrome 64开始，您需要使用本地开发服务器来测试依赖于CSS对象模型的功能。

在从本地文件系统加载的样式表中访问CSS规则违反了Cross-Origin Resource Sharing (CORS)政策 - 但Chrome直到最近才执行此操作，而其他浏览器似乎还没有强制执行。< / p>

Chrome 64.0.3282。0（2018年1月发布，full change list）包含对样式表安全规则的更改。我没有在完整提交列表中详细记录的任何更改日志中找到此更改。

描述了Chromium中的提交a4ebe08：

更新CSSStyleSheet的行为以匹配安全源的规范

规格如下：   https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface

更新：以下方法现在抛出一个SecurityError如果   样式表无法访问：


cssRules（）/ rules（）

insertRule（）

deleteRule（）

此提交是对错误Security: Inconsistent CORS implementation regarding CSS and the link element.的修复。链接的W3C规范详细描述了CSS对象模型的使用需要同源访问。

这是一个真正的安全约束，您发布的解决方案（online / localhost）可能是最典型的解决方法。有关更多信息，请查看MDN的How do you set up a local testing server? - 它讨论了为什么以及如何使用本地开发服务器来避免CORS问题。

尽管如此，关于这一变化还存在一些悬而未决的问题和辩论。

This comment抱怨说现在检测到无法从JavaScript访问样式表的唯一方法是使用try/catch。
1月23日开放的Chromium bug（document.styleSheets.cssRules is null even with Access-Control-Allow-Origin: *）表明新安全规则可能存在实施问题，导致某些变通办法出现问题。
正在实施的规范似乎非常稳定，但它仍然具有＆＃34; Working Draft＆＃34;状态，以便谁知道它将落在哪里以及其他浏览器将实现什么。

无法从Chrome 64中的本地css文件访问cssRules

1 个答案: