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

Question

这是代码：

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

您会注意到alert(document.styleSheets[x].cssRules.length)因“安全异常”而失败。 任何解决方法。 我问，因为有一些“CSS延迟加载”类使用此功能来检测是否加载了CSS文档。

另外：安全例外是正确的行为/是否符合标准？

Answer 1

尝试读取从其他域或服务器加载的样式表或尝试读取@import规则时，您可能会收到该错误。

为了您的目的，只需检查document.styleSheets.length。

Answer 2

截至2013年，您可以在<link> -Element上设置“crossorigin”属性，以通知浏览器此CSS受信任（ https://developer.mozilla.org/en-US/docs/Web/HTML/Element /链接 ）。

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

Answer 3

你正在从另一个域加载css文件，我想你不能修改外部加载的css文件的cssRules。

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

Answer 4

尝试条件：（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来获取它

Answer 5

样式表在那里工作正常，您无法访问样式表的cssRules属性，因为浏览器将其设置为null。

您获得的安全性错误是由于相同的源策略 - 您正在处理来自其他域的样式表，如果样式表托管在您的网页所在的域中，则不会出现此问题。

Answer 6

您可以将失败的行放在try-catch块中。 这就是我在一个项目中解决同样问题的方法。

Answer 7

尝试使用window.document.styleSheets[x].cssRules.length而不是document.styleSheets[x].cssRules.length 。 它将在Firefox上运行，没有任何安全性异常。