为什么我无法在 Chrome 64 中从本地文件访问 CSS 规则？

在 Chrome 64 中无法从本地 CSS 文件访问 CSS 规则

最近，Web 开发者遇到了一个问题，即在 Chrome 64 中无法从本地 CSS 文件访问 CSS 规则。 Chrome 版本 64。此问题可归因于浏览器中实施的安全更改。

问题

过去，Chrome 允许开发人员从本地文件访问 CSS 规则。但是，在版本 64 中，此功能已受到限制。尝试访问样式表的 cssRules 属性时，开发人员遇到未定义的响应或错误。

<code class="html"><script>
window.onload = function() {
  try {
    alert(document.styleSheets[0]); // works
    alert(document.styleSheets[0].cssRules); // undefined
  } catch (e) {
    alert(e); // error
  }
}
</script>

<link rel='stylesheet' href='myStyle.css'>

<!-- myStyle.css -->
body {
  background-color: green;
}</code>

解决方案

为了解决此问题，开发人员已经确定了几种解决方法：

1. 在线或从本地主机提供文件：通过在服务器上托管 HTML 和 CSS 文件或使用本地主机，不会强制执行 CORS 策略，并且可以访问 CSS 规则。
2. 使用其他浏览器：Internet Explorer、Microsoft Edge 和 Firefox 等其他浏览器目前不强制实施相同的 CORS 限制。
3. 命令行选项： Chrome 提供了一个命令行选项 --allow-file-access-from-files ，允许从本地文件访问 CSS 规则。请谨慎使用此选项。

说明

此问题的根本原因在于 Chrome 安全规则的更改。 Chrome 现在遵守跨源资源共享 (CORS) 政策，该政策限制对不同来源的资源的访问。由于本地文件与 HTML 文件的来源不同，因此从这些文件访问 CSS 规则违反了 CORS 政策。

未决问题

虽然 Chrome 中实施 CORS 政策提高了安全性，但还产生了一些未解决的问题：

• 检测样式表是否无法从 JavaScript 访问的唯一方法是通过 try/catch 块。
• Chrome 中可能存在实现问题这会破坏某些解决方法。
• CSS 对象模型规范仍处于“工作草案”状态，为未来的更改留有空间。

以上是为什么我无法在 Chrome 64 中从本地文件访问 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！