Pud*_*dle 17 html javascript css google-chrome cors
这是一个简单的问题示例:
<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.作品与其他浏览器(如IE浏览器,微软边缘,火狐)
3 铬--allow-文件访问从-文件
Bra*_*nan 31
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和链接元素的不一致的CORS实现.链接的W3C规范详细描述了CSS对象模型的使用需要同源访问.
这是一个真正的安全约束,您发布的解决方案(online/localhost)可能是最典型的解决方法.有关更多信息,请查看MDN 如何设置本地测试服务器？ - 它讨论了为什么以及如何使用本地开发服务器来避免CORS问题.
也就是说,围绕这一变化还存在一些悬而未决的问题和争论.
try/catch.| 归档时间： |
|
| 查看次数： |
17352 次 |
| 最近记录： |