document.styleSheets未检测到所有样式表

Question

我试图在任何加载的页面中检测(然后更改)样式表.

我尝试下面的代码:

// from https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList
var allCSS = 
    [].slice.call(document.styleSheets)
        .reduce(function (prev, styleSheet) {
            if (styleSheet.cssRules) {
                return prev +
                    [].slice.call(styleSheet.cssRules)
                        .reduce(function (prev, cssRule) {
                            return prev + cssRule.cssText;
                        }, '');
            } else {
                return prev;
            }
        }, '');
console.log(allCSS);

例如,当我在此页面上运行此代码时,我在控制台中获得了一些样式表.

然而,这绝对不是所有的风格,它实际上只是它的一小部分.

例如,在调试器中,我看到页面all.css从'cdn.sstatic.net' 加载了很多样式,但都没有显示.

我究竟做错了什么 ？以及如何获得所有样式表？

谢谢!

Answer 1

CssRules

在某些浏览器中,如果从不同的域加载样式表,则 在SecurityError中
调用cssRules结果.

• 用户代理(默认)样式表在中不可见 document.styleSheets

CSSStyleSheet接口(规格)

cssRules属性必须遵循以下步骤:

• 如果未设置origin-clean标志,则抛出SecurityError异常.
• 返回表示CSS规则的只读实时CSSRuleList对象.