Question

我正在我的Wordpress网站的自定义javascript中使用此功能。

var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        console.log(sheet.cssRules)
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));

这里的问题是上述功能在首页上可以正常使用，但是

将Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules放在内页上。

这是指向我的网站的链接，

Homepage //here you will see no error in console

Inner Page //here you will see an error in console

根据我的研究，此错误是由跨域资源共享（CORS）引起的，但是为什么它可以在首页上使用？

Answer 1

毫无疑问，该问题是由CORS引起的。我建议您console.log(document.styleSheets)并查看元素的href，以检查执行此document.styleSheets.length - 1后将哪个样式表传递给您的addrule（），样式表的href应与您的域相同

Answer 2

如果不在sheet.cssRule之前加上“ ../”，它将无法正常工作。只需继续计算内部文件的深度，然后添加“ ../”使其完全等于该值即可。

写类似“ ../../../../sheet.cssRule”的东西而不是“ sheet.cssRule”应该可以解决问题。

Answer 3

我了解到，当我们比较两个页面并尝试在脚本中使用（;）半冒号时关闭console.log时，代码绝对没问题。

console.log(sheet.cssRules);

sheet.cssRules在内部页面上引发错误，但在首页上可以正常工作

3 个答案: