sheet.cssRules выдает ошибку на внутренних страницах, но отлично работает на домашней странице

Question

Я использую эту функцию в пользовательском javascript на моем сайте Wordpress.

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 на внутренних страницах. .

Вот ссылка на мой сайт,

Домашняя страница //here you will see no error in console

Внутренняя страница //here you will see an error in console

Согласно моему исследованию, эта ошибка вызвана перекрестным общим доступом к ресурсам (CORS), но почему он работает на домашней странице?

Answer 1

Нет сомнений, что проблема вызвана CORS. Я предлагаю вам console.log(document.styleSheets) и посмотреть href элемента, чтобы проверить, какая таблица стилей передается в ваш addrule () после выполнения этой document.styleSheets.length - 1, href таблицы стилей должен совпадать с вашим доменом.

Answer 2

Я понимаю, что ваш код абсолютно в порядке, когда мы сравниваем обе страницы и пытаемся закрыть console.log с (;) точкой с запятой в вашем скрипте.

console.log(sheet.cssRules);

Answer 3

Без вас работать не будет, включая "../" до sheet.cssRule. Просто посчитайте глубину вашего внутреннего файла и добавьте «../», чтобы он был точно равен этому значению.

Запись чего-то вроде "../../../../sheet.cssRule" вместо "sheet.cssRule" должна решить проблему.