Почему "document.styleSheets" возвращает пустое значение после каждых 3-5 обновлений браузера?

Я хочу добиться того, чтобы пользователь определял конкретные таблицы стилей для обработки в файле JavaScript, который я написал, и вот код, который я использовал для получения указанных таблиц стилей:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="sheet-1.css">
    <link rel="stylesheet" href="sheet-2.css">
    <link rel="stylesheet" href="sheet-3.css">
    <!-- other css files -->

    <style>
        /* inline styles */
    </style>

</head>
<body>

    <script src="jquery-2.1.1.min.js"></script>
    <!-- some plugins -->

    <script>
        jQuery(document).ready(function($) {

            // user specified stylesheets
            var watchedStyleSheetsNames = [ 'sheet-1.css', 'sheet-2.css', 'sheet-3.css' ]

            var allSheets    = document.styleSheets,
                targetSheets = [];

            for ( var i = watchedStyleSheetsNames.length - 1; i >= 0; i--) {
                Object.keys( allSheets ).forEach ( function (j) {
                    if( allSheets[j].href && allSheets[j].href.indexOf( watchedStyleSheetsNames[i] ) !== -1 ) {
                        targetSheets.push(allSheets[j]);
                    }

                });            

            };

            // result
            console.log( 'Watched Stylesheets Array : ' + targetSheets );

        });
    </script>
</body>
</html>



Проблема в том, что все отлично работает с первой загрузкой страницы, а затем после 3-5 обновляет массив targetSheets возвращает пустое значение, которое, очевидно, разрушает все, что было сделано после этого, затем после обновления в другой раз я получаю ожидаемое значение и так далее. Я попробовал все браузеры, очистил кеш, снова и снова происходит одно и то же. вот изображение того, что я получаю в своей консоли:

https://www.dropbox.com/s/ipnc20hcdr3d6wl/01.png?dl=0

Я тестировал свой код онлайн и локально, используя сервер wamp с последними версиями всех браузеров. Итак, что вызывает эту проблему и как я могу это исправить?

Спасибо за ваше время.

редактировать

Я нашел ответ, потому что реализовал плагин без префикса, который удаляет узлы ссылки, а затем повторно вставляет обработанный CSS в теги стиля.

Источник

1 ответ

Вы ищете таблицы стилей из jQuery ready обработчик. Весь смысл jQuery ready Обработчик заключается в том, что он запускается после анализа HTML, но до того, как все зависимости были загружены и оценены. Очевидно, что иногда ваш код запускается до загрузки таблиц стилей.

Вы хотите подождать, пока таблицы стилей не будут загружены. Единственный известный мне способ проверить, была ли загружена связанная таблица стилей, - это загрузить ее динамически, просматривая load событие до установки href, Могут быть и другие способы, это только один, который я знаю.

В вашем случае, например, вы можете удалить <link> элементы из разметки и сделать это:

jQuery(document).ready(function($) {

    // user specified stylesheets
    var watchedSheets = [
        { name: 'sheet-1.css' },
        { name: 'sheet-2.css' },
        { name: 'sheet-3.css' }
    ];
    var completed = 0;
    var head = document.querySelector('head');

    watchedSheets.forEach(function(sheet, index) {
        var link = document.createElement('link');
        link.onload  = function() {
            sheet.loaded = true;
            ++completed;
            if (completed === watchedSheets.length) {
                done();
            }
        };
        link.onerror = function() {
            sheet.error = true;
            ++completed;
            if (completed === watchedSheets.length) {
                done();
            }
        };
        link.rel = "styleshet";
        link.href = sheet.name;
        head.appendChild(link);
    });

    function done() {
        var allSheets    = document.styleSheets,
            targetSheets = [];

        Object.keys( allSheets ).forEach ( function (j) {
            var sheet = watchedSheets[j];
            if( !sheet.error && allSheets[j].href && allSheets[j].href.indexOf( sheet.name ) !== -1 ) {
                targetSheets.push(allSheets[j]);
            }
        });            

        // result
        console.log( 'Watched Stylesheets Array : ' + targetSheets );
    }
});
Источник
Другие вопросы по тегам