在 Codepen 中检测到 CSS-only 更新

Question

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

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

在 Codepen 中检测到 CSS-only 更新

Detect a CSS-only update in Codepen

javascript

css

jquery

codepen