未捕获的DOMException：无法读取＆＃39; cssRules＆＃39;属性

Question

我想知道为什么我的脚本适用于Firefox，而不适用于谷歌浏览器

JS：

var _timelineWidth = (Number.parseInt(document.styleSheets[0].cssRules[16].style.width) / 100) * document.body.clientWidth;

CSS：

#timeline {
  position: relative;
  top: 15px;
  left: 12.5%;
  height: 5px;
  background: #aaa;
  border-radius: 2.5px;
  cursor: pointer;
}

这里是chrome的错误代码

  

未捕获DOMException：无法读取＆＃39; cssRules＆＃39;物业来自   ＆＃39; CSSStyleSheet＆＃39;：无法访问规则

Answer 1

在最新的Chrome中， CORS 安全规则也适用于样式表（与Iframe规则类似）。

您可以加载和渲染它们但是，无法通过javascript访问内容（如果从跨域加载）。

如果您的CSS样式表来自与HTML相同的域/或包含在同一HTML文件中，您将能够访问document.styleSheets[elem].cssRules，否则会抛出错误

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

  

跨域样式表

  

相同域样式表

Answer 2

您可以添加 crossorigin="anonymous" 以防止出现错误。

<link rel="stylesheet" href="https://..." crossorigin="anonymous">

更多信息在这里：

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

这将创建一个 potencial cors request，但服务器必须响应 Access-Control-Allow-Origin: * 或 Access-Control-Allow-Origin: <authorized-domain>。

您可以查看 here 以了解如何向您的服务器添加 CORS 支持。

有关 CORS 的更多信息，您可以阅读 this 和 this。