Обнаружить обновление только CSS в Codepen - PullRequest
Новая
       8

Обнаружить обновление только CSS в Codepen

0 голосов
/ 22 октября 2018

В Codepen при включенной функции предварительного просмотра с автоматическим обновлением после редактирования панели CSS Codepen перерисовывает панель предварительного просмотра после небольшой задержки.Это не новость.Тем не менее, кажется, что он не будет повторно инициализировать ваш javascript, если нет редактирования на панели javascript.Поэтому: при внесении изменений только в CSS JS не выполняется повторно. Я хочу, чтобы прослушиватель JS обнаруживал, когда происходит обновление CSS, которое перерисовывает экран.

Iначал с прослушивания запросов XHR, что вполне достижимо, однако я понял, что это не запрос, который мне нужно прослушивать, а ответ.На самом деле, это обновление DOM, которое происходит в результате некоторого обратного вызова JS после ответа XHR, полученного и обработанного.И поскольку панель предварительного просмотра выглядит инкапсулированной внутри iframe, я не уверен, есть ли у моего исполняемого javascript даже доступ для обнаружения такого обновления - я не уверен, как Code Pen обрабатывает эти изменения.Может быть, лучший вопрос, как я могу обнаружить перерисовку экрана iframe?Точно сказать не могу.Но вот нерабочий * фрагмент, чтобы проиллюстрировать то, чего я пытаюсь достичь:

Попробуйте отредактировать значение CSS p {color} в этом примере: https://codepen.io/anon/pen/oaPvYJ и обратите внимание, что rgbтекстовое значение не обновляется для соответствия.

1 Ответ

0 голосов
/ 22 октября 2018

Вы можете использовать MutationObserver для просмотра тега head, чтобы при вставке CSS вы могли вызывать функцию.https://codepen.io/WebNesting/pen/KGxPbZ

var setText = function() {
  $("p").text(function() {
    return $(this).css("color");
  });
};

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    setText();
  });
});

observer.observe($("head")[0], {
    childList: true,
});
setText();
...