javascript - 在 Codepen 中检测 CSS-only 更新

Question

在 Codepen 中，启用自动更新预览功能后，在编辑 CSS Pane 时，Codepen 会在一小段延迟后重新绘制预览 Pane 。这不是新闻。但是，除非对 javascript Pane 进行编辑，否则它似乎不会重新初始化您的 javascript。因此:当您进行仅 CSS 更改时，JS 不会重新执行。我希望 JS 监听器检测何时有重绘屏幕的 CSS 更新。

我从监听 XHR 请求开始，这是可以实现的，但我意识到这不是我需要监听的请求，而是响应。好吧，确实是 DOM 更新是由于某些 JS 回调在收到并处理 XHR 响应后发生的。而且由于预览 Pane 看起来封装在 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();