问题标签 [mutation-observers]

我正在尝试使用 D3.js 创建我的第一个流图。我从一个工作示例开始，其中包含来自在线发布的代码的工具提示，http ://bl.ocks.org/WillTurman/4631136 ：

当我将index.html和data.csv文件复制到我的 PC (Windows 7) 时，我可以在浏览器 (Firefox) 中看到流图。但是，我收到一个 JS 警告，“不推荐使用突变事件。请改用 MutationObserver。 ”

哪些代码行对应于突变事件？我应该如何编辑它们以使用 MutationObserver 代替？

我是 D3 和 javascript 的新手。虽然我在网上找到了一些关于突变事件和 MutationObservers 的讨论，但我没有看到任何足以让我理解并适用于我的情况的基本示例。我会很感激任何提示。

我有一个DIVwith 样式resize: both，然后我设置了一个MutationObserver监听属性变化的。

我做了一个小提琴：http: //jsfiddle.net/2NQQu/2/

在 Chrome（我测试了 Chrome 31）中，当您DIV使用鼠标调整大小时，不会触发回调。在 Firefox 中它运行良好。

这种行为是有意的和/或标准的吗？它是一个错误吗？

我正在使用 MutationObserver 来查找添加到网页的图像。由于许多图像是通过 CSSbackground-image属性显示的，因此除了查找img标签之外，我还在检查当前/计算的 CSS 样式，例如...

但是，似乎在触发突变事件的节点和正在应用的 CSS 规则之间存在延迟，因此在突变事件期间似乎没有延迟，backgroundImage即使稍后会有。当代码在调试期间工作（使用断点单步执行）但在运行时不起作用时，我注意到了这一点。延迟突变事件处理setTimeout也可以，但要确定延迟需要相当大并且从页面到页面发生变化（我不确定何时保证应用 CSS 规则）。一个可能的原因可能只是延迟加载或 CSS 内容的注入。

实现此功能的最佳方法是什么？我想我正在经历一种风格变化的突变，但我怀疑这是否存在。

我正在尝试修复和问题我的代码。我最初使用 DOMNodeRemoved 和 DOMNodeInserted 来关注我正在处理的页面中的元素。它们运行良好，但在 IE 中不起作用。所以我开始尝试使用 MutationObserver。

这是我在 onPageInit 上调用的代码（回调写入控制台，但我禁用了它，因为 IE 不再支持控制台）：

它在 chrome 中运行良好，但由于某种原因在 IE 中表现平平。我在加载页面时收到一个消息框，上面写着：

难道我做错了什么？附加信息：页面是一个网络套件页面，运行 jQuery 1.7.2（如果重要）

以下脚本有效，但chrome说有错误..
我应该怎么做才能解决这个错误？

chrome控制台中的错误消息是这样的；

Uncaught NotFoundError：试图在不存在的上下文中引用节点。（匿名函数）

所以 Chrome显然有一个错误，当手动调整元素大小时，用 a 观察元素的大小MutationObserver不起作用。

在修复错误之前，我应该使用什么来代替或补充它才能在 Chrome 中进行这项工作？我应该使用已弃用的突变事件还是有其他更好的选择？

有没有办法在不使用元素对象的情况下在 AngularJS 中做到这一点？

我们目前正在成功检测页面中目标 DOM 元素的突变。我们现在正在研究将这些目标节点突变的某些属性聚合到一个“列表”中，以通过 AJAX 调用发送以在服务器上进行处理。来自服务器的回调将允许我们修改这些目标元素的属性。

但是，问题在于何时进行第一次 Ajax 调用。显然我们知道突变何时开始（因此添加到列表中）。但是，我们永远不知道它们何时结束（MutationObserver 空闲）然后进行 AJAX 调用。当然，我们可以编写一个函数来检查列表的大小以及经过的一段时间，以便在函数唤醒时进行包含聚合列表内容的 Ajax 调用。

这是它还是有更好的方法来处理这个？

想法赞赏！

我想知道在给定的情况下找到周围Elements的最干净的方法是什么MutationRecord？

MutationRecord有.nextSibling,.previousSibling属性，但可能包含文本节点，我需要获取常规元素节点。

工作示例在这里：http: //jsfiddle.net/tomalec/ceku2/

我尝试使用

http://jsfiddle.net/tomalec/Q2HFY/2/

但是，它看起来有点冒险，并且对于已删除的那些根本不起作用。

http://jsfiddle.net/tomalec/Q2HFY/3/

我正在构建一个 undomanager，类似于 W3C undomanager，它还没有在各种浏览器中准备好。我实现了一个简单的事务调用，它在监视 DOM 更改的同时调用回调，然后将必要的结构添加到稍后可用于撤消（或重做）更改的数组中。

一个简单的例子：

要使用这个：

如果我observer.disconnect()立即调用，突变观察者永远不会到达alert调用，但如果我使用 setTimeout，它工作正常。

我很乐意接受 setTimeout 调用，唯一的问题似乎是对于较大的更改，您必须将断开连接延迟多达 800 毫秒。

几乎就好像断开连接发生在 DOM 更改实际完成之前，因此没有检测到任何内容。

这发生在 Firefox 25 和 Chrome 32 中。

我想了一秒钟，因为observer它是一个局部变量，也许它很快就超出了范围，但是将其更改为全局变量并没有帮助。我不得不推迟调用以disconnect()让 DOM 有机会赶上它。

这是浏览器错误吗？disconnect()一旦 DOM 再次准备好，有没有更好的方法来调用？

我正在构建一个 chrome 扩展来帮助自动化 Twitter 网站的各个部分。当您浏览时，例如加载主页，然后单击趋势/搜索链接，不会触发 jQuery“就绪”或 DOMContentLoaded 事件。查看网络跟踪，它表明正在通过 ajax 加载下一页的 html。我想检测何时发生这种情况，而不是使用 setInterval 或类似的东西监视 document.location 。

我查看了 DOMNodeRemoved 事件，但它会在任何节点被删除时触发，并且是一种可能的解决方案，但由于它频繁触发而显得笨拙，而不仅仅是页面更改，并且没有明确指示页面已更改。

• 我假设 Twitter 在地址栏发生变化时使用 pushState 更新位置。位置更改时是否有事件？或者当它特别改变 pushState 时？

• ajax 调用不是 jQuery 的模式，所以我不能将它与 jQuery 全局事件挂钩。是否可以检测到任何 XMLHttpRequest 请求？

什么是捕捉页面变化的好方法？