问题标签 [mutation-observers]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
974 浏览

javascript - 有没有办法在 MutationObserver 机制触发(onVisibilityChanged)之前捕获元素状态?

我正在尝试使用 JavascriptMutationObserver
获取有关元素状态更改的信息,以获取更改之前元素的状态,然后检查当前状态并基于此做出一些决定。

基本上我正在尝试实现onVisibilityChanged事件。

我正在捕捉我关心的元素的任何变化,然后我会检查它们是否可见。然后,如果可见性与广播的内容不同visibilityChanged
我知道我可以做的解决方法,因为我得到了发生的更改,我可以创建元素的克隆(MutationEvent[0].target)并恢复应用所有更改,然后检查克隆是否可见,但这听起来“hacky”且效率低下,所以我想知道有没有办法在突变发生之前捕获元素。我确实理解这是一个远射,因为MutationObserver在所有变化发生后被解雇,这就像时间旅行,但我全神贯注于您的建议。

0 投票
1 回答
3246 浏览

security - 检测、更改或删除现有的变异观察者

如果某个 JS 添加了一个变异观察者,其他 JS 是否有可能检测、删除、替换或更改该观察者?我担心的是,如果某些 JS 旨在破坏某些 DOM 元素而不被发现,那么 JS 可能想要摆脱任何观察该 DOM 元素的观察者。

0 投票
3 回答
1567 浏览

javascript - 有没有办法用 document.createElement() 跟踪元素的创建?

有什么方法可以捕捉到document.createElement()事件吗?

例如,某处,在<body>我有的部分内

是否可以从该<head>部分跟踪该事件(使用一些 addEventListener、突变观察者或任何其他方式)?

注意:我需要跟踪元素的创建,而不是插入

0 投票
1 回答
238 浏览

javascript - 为什么 Youtube 评论不会触发 DOM 突变?

我正在开发一个谷歌浏览器扩展。每次它所在的页面发生变化时,它的内容脚本都应该触发,而且大多数时候都会触发。我MutationObserver为此使用了一个。

但是,当我在 Youtube 上(可能还有其他我没有注意到问题的网站)并且我向下滚动以加载评论时,MutationObserver不会触发。为什么会这样,DOM 不应该改变吗?

编辑:我可能想补充一点,我将观察者设置为监视subtree,childListattribute的变化document.body

0 投票
1 回答
379 浏览

javascript - 如何确定 Lightstreamer / Ajax 彗星推送数据更改了哪些内容?

我的目的是监视带有 Chrome 扩展程序的网页。网页由 Ajax comet push 或 Lightstreamer 更新。例如,如果某个值已达到某个阈值,则该想法是生成警报或其他动作。根据其他答案,我确实创建了以下 chrome 扩展代码,将更改的内容写入控制台:

清单.json:

内容脚本.js:

到目前为止,它几乎可以正常工作,我看到所有更改的内容(例如在http://demos.lightstreamer.com/MonitorDemo/上)。
“if (i>100)...”只是为了避免在控制台日志中输出过多。
但我不知道如何找出已更改的特定值(例如http://demos.lightstreamer.com/MonitorDemo/上“Free Heap”的值),因为没有 Ids 或其他元素设置为区分不同的值。我知道我可以为 MutationObserver 设置过滤器,但我不知道我可以过滤什么来获得例如“空闲堆”值。

这里有一些控制台日志:

0 投票
1 回答
747 浏览

javascript - 在没有 jQuery 的情况下,迭代和修改通过 Ajax 添加的 DOM 元素

我正在开发一个小型 Firefox 插件,用于PageMod处理网页中加载的图像元素。我在网上看到过使用 jQuery 的示例,但由于我正在向每个网页添加内容脚本,因此添加 jQuery 可能会造成无法弥补的损害。

由于 Firefox 支持,感谢AndrewVermieMutationObserver,我尝试执行以下操作:

内容.js

main.js

怎么了 :

  1. 访问http://imgur.com/
  2. 开始滚动直到动态加载图像
  3. 请注意,它们没有改变

当我将鼠标悬停在图像上时,我console.log()只能看到.tagNamep#text

我需要的

遍历注入脚本的网页中动态加载的每个元素,并能够修改元素的属性。

如果它可以用纯 JavaScript 来完成,不管有没有MutationObserver,那都会非常棒。

否则,如果我能发现某些元素已被加载以再次通过页面的所有元素重复,那会没问题但不会膨胀。

我希望我已经把事情弄清楚了。

任何帮助将不胜感激。

0 投票
1 回答
226 浏览

javascript - Firefox 不服从 Mutation Observer 中的 childList 配置参数

这是我声明我的突变观察者的方式:

上面的代码在 Chrome 中运行良好。当我将 HTML 元素拖放到内容可编辑区域时,当元素直接放在被观察元素上以及将元素拖放到被观察元素的子元素中时,观察者就会触发。

在 FireFox (v 29.0.1) 中,观察者仅在元素直接添加到被观察元素而不是其子元素时触发。为什么?

0 投票
0 回答
159 浏览

javascript - 将节点插入 DOM 时的事件

我正在用 JavaScript 创建一个 DOMNode:

我想绑定到一个在插入文档时触发的事件。

目前我正在使用:

该方法已被弃用。我可以使用具有相同效果的替代方法吗?

问题是节点在文档中时需要应用某些绑定,我想在删除节点时清理它们,或者在删除并重新插入节点时重新应用它们。

0 投票
1 回答
1820 浏览

javascript - Chrome 突变观察者

我正在尝试使用 Chrome 中的 Mutation Observer 来监控何时添加新图像,这是我的代码到目前为止:

发生了一件奇怪的事情:似乎调用了回调,但没有找到任何图像。当我打开控制台(Ctrl+Shift+J)时,代码开始正常工作,此时添加的所有图像都被打印出来。同样的事情当我重新调整打开的控制台大小时发生。

我是否必须为配置值设置其他参数?为什么打开控制台突然使代码工作?

0 投票
2 回答
1754 浏览

javascript - 如何在没有 jQuery 的情况下检测 DOM 元素突变

假设我有以下 HTML:

当此元素发生高度突变时,我希望收到警报。我希望MutationObserver类对此有所帮助,但这是我的问题:

它像预期的那样触发我的回调,但是正常的用户交互不会触发这个,例如, http: //jsfiddle.net/wq4q9/2/

我的问题是,检查元素高度是否发生变化的最佳现代方法是什么?

请不要使用 jQuery。