javascript - 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 //这里你不会在控制台看到任何错误

Inner Page //你会在控制台看到一个错误

根据我的研究，这个错误是由跨源资源共享 (CORS) 引起的，但为什么它在主页上有效？

Answer 1

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