document.stylesheet не обновляется мгновенно - PullRequest
Новая
       56

document.stylesheet не обновляется мгновенно

0 голосов
/ 20 июня 2020

Я занимаюсь разработкой веб-сайта stati c. Я добавляю таблицу стилей CSS в заголовок документа, используя JavaScript. После CSS загрузок я делаю некоторые расчеты, основанные на положении и размерах элементов. Таким образом, CSS обязательно сначала загружается, а затем вычисляется.

Но проблема в том, что Chrome браузер ожидает выполнения скрипта, и пока он добавляет таблицу стилей в заголовок, но фактически не загружает ее, и следовательно document.stylesheets не обновляется!

Эта проблема только с chrome. Firefox загружает его мгновенно, как и ожидалось!

Я создал образец кода, чтобы легко продемонстрировать проблему 

<!DOCTYPE html>
<head></head>
<body>
    <p id='status'></p>
    <button onclick="updateStatus()">updateStatus</button>
    <script>
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = './style.css'
        document.head.appendChild(link)
        updateStatus()
        function updateStatus() {
            document.getElementById('status').innerHTML = document.styleSheets.length;
        }
        </script>
</body>
</html>

Попробуйте открыть этот вопрос в chrome и Firefox. Если вы запустите фрагмент в Chrome, он увеличится на единицу, что означает, что CSS будет загружен позже. С другой стороны, значение Firefox не меняется, означает, что сначала загружено CSS.

Как я могу заставить chrome или любой другой браузер сначала загрузить CSS, а затем продолжить JavaScript Выполнение?

Я попытался прикрепить событие onload (также предлагается здесь ) в таблицу стилей, и оно работает, но мой код большой и многоцелевой. Я не могу разделить его на части до CSS и после CSS!

Ответы [ 3 ]

0 голосов
/ 21 июня 2020

Возможно, вы ищете непонятный хакер, чтобы обнаружить, когда элемент link загрузил свое содержимое.

К сожалению, для links нет события «load»; например, следующий обратный вызов никогда не запускается: 

let link = document.createElement('link');
link.href = '...';
link.addEventListener('load', () => { /* ... */ });

Кто-то умный понял, что img элементы, с другой стороны, do предлагают событие «загрузки» - поэтому, если это было img тег загружает ваш ресурс таблицы стилей вместо тега link, вы сможете увидеть событие.

Единственное дополнительное знание, которое нам нужно на данном этапе, чтобы заставить этот хак работать, - это понять, что если тег img загружает ресурс, который не может быть интерпретирован как изображение, он генерирует событие «ошибка» вместо события «загрузка». загружается ресурс, указанный в вашем link href: 

let link = document.createElement('link');
link.rel = '...';
link.href = '...';

let imgForDetectingLoad = document.createElement('img');
imgForDetectingLoad.src = link.href; // Load the same resource
imgForDetectingLoad.addEventListener('error', () => {
  // The `link` element has loaded its content!
});
0 голосов
/ 21 июня 2020

Просто используйте случайное число в URL-адресе. Это предотвратит загрузку браузером вашей таблицы стилей из кеша. 

link.href = './style.css?rand=' + Math.random();

Надеюсь, это поможет вам

0 голосов
/ 20 июня 2020

Простое решение, когда дело доходит до такого рода проблемы, - преобразовать файлы в. PHP и разместить их локально с помощью wampserver или аналогичной службы :)

Причина, по которой chrome не обновляется заключается в том, что стиль хранится в кеше. Разрабатывая в PHP, вы заставляете браузер обновлять sh стиль каждый раз.

По крайней мере, я решил это так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...