在Codepen中检测CSS专用的更新

Question

在Codepen中，启用了自动更新预览功能后，在编辑CSS窗格时，Codepen在稍微延迟之后重新绘制预览窗格。这不是新闻。但是，除非对javascript窗格进行了编辑，否则它似乎不会恢复您的javascript。因此：当您做CSS仅更改时，JS不会重新执行。我希望JS侦听器检测到何时有一个更新的CSS重画屏幕。

我从监听XHR请求开始，这是可以实现的，但是我意识到这不是我需要侦听的请求，而是响应。实际上，在接收和处理XHR响应之后，会发生一些JS回调的DOM更新。因为预览窗格看起来被封装在iframe中，我不确定我的可执行javascript是否能够检测到这样的更新--我不确定Code Pen是如何处理这些更改的。也许更好的问题是，如何检测到iframe屏幕重绘？不确定。但这里有一个不起作用的片段，用来说明我正在努力实现的目标：

在本例中尝试编辑CSS p {color}值：https://codepen.io/anon/pen/oaPvYJ，并注意到rgb文本值没有更新以匹配。

Answer 1

您可以使用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();