Firefox无法枚举document.styleSheets[].cssRules[]。

Question

以下是代码:

• http://jsfiddle.net/salman/2hyYg/
• http://jsfiddle.net/salman/2hyYg/show/

你会注意到alert(document.styleSheets[x].cssRules.length)会出现“安全异常”的错误。有什么解决办法吗？我之所以问这个问题，是因为有几个“CSS懒加载”类使用了这个功能来检测CSS文档是否已加载。

另外：安全异常是正确的行为吗？它符合标准吗？

- Salman A

---

我遇到了错误：未捕获异常：[Exception..."底层对象不支持参数或操作"代码："15" nsresult："0x8053000f（NS_ERROR_DOM_INVALID_ACCESS_ERR）"位置："http://fiddle.jshell.net/salman/2hyYg/show/ Line: 49"]，这是在第一个示例中。 - mplungjan

NS_ERROR_DOM_INVALID_ACCESS_ERR 是一个错误。 - Salman A

错误：宽度为空 源文件：http://jsfiddle.net/js/LayoutCM.js 行：189 在第二个位置 - mplungjan

抱歉造成困惑...我稍微修改了这个代码片段。 - Salman A

Answer 1

当尝试读取来自不同域或服务器的样式表，或尝试读取 @import 规则时，您可能会遇到该错误。

对于您的目的，只需检查 document.styleSheets.length。

- kennebec

---

就您的目的而言，只需检查stylesheets.length即可，直到具有其所有规则的样式表在浏览器中呈现之前，它不会增加。<<这是一个经过验证的解决方法吗？ - Salman A

猜测不是这样的... Chrome在样式表加载之前不会增加document.styleSheets.length，但是FireFox会。没有检查其他浏览器。 - Salman A

Answer 2

截至2013年，您可以在元素上设置“crossorigin”属性，以向浏览器发信号表明此CSS是可信的（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link）。

之后，您可以通过Javascript访问其规则。

- Johannes Jander

---

在Firefox中不起作用。 - capr

Answer 3

尝试使用条件：（IE解决方法）

function aftermath(index) {
    var css = document.styleSheets[index].rules || document.styleSheets[index].cssRules;
    alert(css.length);
}

这里出现了错误：

aftermath(document.styleSheets.length - 1);

如果我将其设置为0，一切都正常...

问题在于此时CSS尚未准备好，如果您需要访问它，您需要在第二个时刻进行访问。

最后编辑：

如果您想从源代码中保持CSS更新，可以使用PHP代理来加载它：

<?php
$name = 'http://ajax.googleapis.com/ajax/libs/jqueryui/$_GET[version]/themes/$_GET[theme]/jquery-ui.css';
$fp = fopen($name, 'rb');
fpassthru($fp);
exit;
?>

然后您可以使用例如/proxy.php?version=1.7.0&theme=humanity获取它。

- Achilleterzo

---

我已经修订了这份代码，并添加了延迟。但无论我怎么做，都无法解决安全问题。 - Salman A

正如我所说，当您设置*window.setTimeout(aftermath, 2000);*后，一切都正常...除了安全错误。 - Achilleterzo

代理是一个有效的选项；但在我的情况下不是。 - Salman A

啊，CDN的好处，却没有任何CDN的好处 ;) - alex

Answer 4

你正在从另一个域加载css文件，我猜测你无法修改外部加载的css文件的cssRules。

请参考：使用.cssRules访问跨域样式表

- jishi

Answer 5

样式表已经存在并且正常工作，但是您无法访问样式表的cssRules属性，因为浏览器将其设置为null。

您遇到的安全错误是由于同源策略 - 您正在处理来自另一个域的样式表，如果样式表托管在与您的网页相同的域上，则不会出现此问题。

- Martin Jespersen

Answer 6

你可以将出错的代码放在 try-catch 块中。这就是我在一个项目中解决同样问题的方法。

- Gabriel Hautclocq

Answer 7

尝试使用window.document.styleSheets[x].cssRules.length代替document.styleSheets[x].cssRules.length。这样在Firefox上就不会出现任何安全异常了。

- Sivaguru