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

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

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

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