Firefox 无法枚举 document.styleSheets[].cssRules[]答案

【问题标题】：Firefox not able to enumerate document.styleSheets[].cssRules[]Firefox 无法枚举 document.styleSheets[].cssRules[]
【发布时间】：2011-07-16 11:13:08
【问题描述】：

代码如下：

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

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

【问题讨论】：

我收到错误：未捕获的异常：[异常...“底层对象不支持参数或操作”代码：“15”nsresult：“0x8053000f（NS_ERROR_DOM_INVALID_ACCESS_ERR）”位置： "fiddle.jshell.net/salman/2hyYg/show Line: 49"] 在第一个例子中
NS_ERROR_DOM_INVALID_ACCESS_ERR 是错误。
and Error: width is null Source File: jsfiddle.net/js/LayoutCM.js Line: 189 in the second
很抱歉造成混乱...我稍微修改了小提琴。

标签： javascript css firefox securityexception

【解决方案1】：

您正在从另一个域加载 css 文件，我猜您不允许为外部加载的 css 文件修改 cssRules。

看到这个：Accessing cross-domain style sheet with .cssRules

【讨论】：

【解决方案2】：

尝试条件：（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

【讨论】：

我已经修改了小提琴并添加了延迟。但无论我做什么，我都无法解决安全问题。
正如我所说，设置后 window.setTimeout(aftermath, 2000); 一切正常...除了安全错误
代理是一个有效的选项；不过我的情况不是。
啊，CDN 的优点，没有 CDN 的任何优点 ;)

【解决方案3】：

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

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

【讨论】：

为了您的目的，只需检查 stylesheets.length，在包含所有规则的样式表在浏览器中呈现之前，它不会增加。
猜不... chrome 确实不会增加 document.styleSheets.length 直到样式表被加载，但 FireFox 会。没有检查其他浏览器。

【解决方案4】：

样式表在那里并且工作正常，您只是无法访问样式表的 cssRules 属性，因为它被浏览器设置为 null。

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

【讨论】：

【解决方案5】：

从 2013 年起，您可以在 -元素上设置“crossorigin”属性，以向浏览器发出此 CSS 受信任的信号 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)。

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

尝试window.document.styleSheets[x].cssRules.length 而不是document.styleSheets[x].cssRules.length。它可以在没有任何安全异常的情况下在 Firefox 上运行。

【讨论】：