当前位置: 首页 > 面试题库 >

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

阎京
2023-03-14
问题内容

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

<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.在文件在线/本地主机时工作
2.在其他浏览器(例如Internet Explorer,Microsoft Edge,Firefox)下工作
3. chrome –allow-file-access-from-files


问题答案:

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

访问从本地文件系统加载的样式表中的CSS规则违反了跨域资源共享(CORS)策略-但是Chrome直到最近才强制实施此规则,而其他浏览器似乎尚未强制实施。

Chrome
64.0.3282.0(于2018年1月发布,[完整的更改列表])包括样式表安全规则的更改。我找不到比完整提交列表更详细的任何更改日志中的更改。

在Chromium中提交a4ebe08说明:

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

规范在这里:https :
//www.w3.org/TR/cssom-1/#the-cssstylesheet-
interface

已更新:现在,如果无法访问样式表,以下方法将引发SecurityError:

  • cssRules()/ rules()
  • insertRule()
  • deleteRule()

此提交是针对以下错误的修复:安全性:关于CSS和link元素的CORS实施不一致。链接的W3C规范详细描述了使用CSS对象模型需要同源访问的地方。

这是一个真正的安全约束,您发布的解决方案(在线/本地主机)可能是最典型的解决方法。有关更多信息,请查看MDN的“
如何设置本地测试服务器”?-讨论了为什么以及如何使用本地开发服务器来避免CORS问题。

也就是说,围绕此更改仍然存在一些未解决的问题和争论。

对原始安全错误的此评论抱怨说,现在检测到无法从JavaScript访问样式表的唯一方法是使用try/catch
* 1月23日打开的Chromium错误(即使使用Access-Control-Allow-Origin:
,document.styleSheets.cssRules仍为null)表明新的安全规则可能存在实现问题,这打破了某些解决方法。
* 正在实施的规范看起来很稳定,但它仍处于“工作草案”状态,因此谁知道它会降落在哪里以及其他浏览器将实现什么。



 类似资料:
  • ('SPARK_FILES_DIR:',U'/H/TMP/Spark-76BDBD48-CBB4-4E8F-971A-383B899F79B0/userfiles-EE6DCDEC-B320-433B-8491-311927C75FE2')('inputfile name:',[U'empfile1.csv'])('input file path:',U'/H/TMP/Spark-76BDBD48

  • 谢谢大家 我的代码:

  • 我需要从angular组件中访问生成的css类名,以便为第三方组件设置样式。 Angular对本地css类名进行一些神奇的转换,以启用作用域。我需要对一个ngx-datatable组件应用一些自定义样式。为此,我需要向它传递自定义类名。由于angular对类名的作用,这些类名不再匹配。 将类名添加到全局作用域或使用都可以工作,但是我不希望破坏封装。 仪表板-Component.ts 仪表板-Com

  • 如果有人能帮忙,那就太好了!

  • 问题内容: 我对JQuery和Ajax有点陌生,所以如果这是新手的问题,我深表歉意。 我正在尝试使用本地文件中的ajax来访问Web(例如,获取文本文件)。 我没有使用IIS或任何其他来自硬盘驱动器的简单文件(我需要它保持这种状态)。 在IE8和Chrome(版本11.0.696.60)上都进行了检查。 这是一些JavaScript来说明: 此代码试图从Web加载文本文件-IE和chrome上的操

  • 本文向大家介绍Android访问assets本地json文件的方法,包括了Android访问assets本地json文件的方法的使用技巧和注意事项,需要的朋友参考一下 目的:当App中用到固定的json数据时,如:国家城市列表、班级成员等时,可以将json数据制作为本地json文件存入assets文件夹下。 步骤如下: 1、新建assets文件夹,并将json文件复制到此文件夹中 在main文件夹