标签: mutation-observers
检测DOM中的更改
我想在将一些div或输入添加到html时执行一个函数.这可能吗？
例如,添加文本输入,然后应该调用该函数.
推荐指数
解决办法
查看次数
元素添加到页面时的事件
这在前面已经讨论过了:如何使用Jquery将元素添加到页面时执行操作？
每当div添加到页面时,响应者建议触发自定义事件.但是,我正在撰写Chrome扩展程序,但无法访问页面源代码.我有什么选择？我想在理论上我可以setInterval()用来不断搜索元素的存在并添加我的动作,如果元素在那里.
javascript dom event-handling change-notification mutation-observers
推荐指数
解决办法
查看次数
MutationObserver的性能,用于检测整个DOM中的节点
我有兴趣使用MutationObserver检测是否在HTML页面中的任何位置添加了某个HTML元素.例如,我会说我想检测是否<li>在DOM中的任何地方添加了任何内容.
MutationObserver到目前为止,我看到的所有示例只检测节点是否添加到特定容器中.例如:
一些HTML
<body>
...
<ul id='my-list'></ul>
...
</body>
MutationObserver 定义
var container = document.querySelector('ul#my-list');
var observer = new MutationObserver(function(mutations){
// Do something here
});
observer.observe(container, {
childList: true,
attributes: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});
所以在这个例子中,MutationObserver设置为观察一个非常确定的容器(ul#my-list)以查看是否有任何<li>附加到它的容器.
这是一个问题,如果我想不那么具体,并注意<li>整个HTML身体,如下所示:
var container = document.querySelector('body');
我知道它适用于我为自己设置的基本示例......但是不建议这样做吗？这会导致性能不佳吗？如果是这样,我将如何检测和衡量性能问题？
我想也许有一个原因,所有的MutationObserver例子都是如此具体的目标容器......但我不确定.
推荐指数
解决办法
查看次数
最有效的检测/监控DOM变化的方法？
我需要一种有效的机制来检测DOM的变化.最好是跨浏览器,但如果有任何有效的方法不是跨浏览器,我可以使用故障安全的跨浏览器方法实现这些.
特别是,我需要检测会影响页面上文本的更改,因此需要任何新的,删除或修改的元素或对内部文本(innerHTML)的更改.
我无法控制正在进行的更改(它们可能是由于第三方javascript包含等),因此无法从这个角度进行处理 - 我需要以某种方式"监视"更改.
目前我实施了一个"quick'n'dirty"方法,body.innerHTML.length每隔一段时间检查一次.这当然不会检测导致返回相同长度的变化,但在这种情况下"足够好" - 这种情况发生的可能性非常小,并且在此项目中,未能检测到更改将不会导致丢失的数据.
问题body.innerHTML.length是它很贵.在快速浏览器上可能需要1到5毫秒,这可能会让事情陷入困境 - 我也在处理大量的iframe,而且这些都会增加.我很确定这样做的代价是昂贵的,因为innerHTML文本不是由浏览器静态存储的,并且每次读取时都需要从DOM计算.
我正在寻找的答案类型是从"精确"(例如事件)到"足够好"的任何东西 - 或许像innerHTML.length方法一样"quick'n'dirty",但执行速度更快.
编辑:我还应该指出,虽然检测已经修改过的精确元素会"很好",但这并不是绝对必要的 - 只要有任何改变这一事实就足够了.希望这能够扩大人们的反应.我将调查突变事件,但我仍然需要IE支持的后备,所以任何笨拙的,创造性的,非常方形的想法将是非常受欢迎的.
推荐指数
解决办法
查看次数
jQuery选择器可以与DOM变异观察器一起使用吗？
HTML5包含一个"变异观察者"概念,用于监控浏览器DOM的变化.
你的观察者回调将传递看起来很像DOM树片段的数据.我不知道它们究竟是这个还是它们是如何工作的.
但是当您编写代码以与无法控制的第三方网站进行交互时(例如使用Greasemonkey脚本或Google Chrome用户脚本),您必须检查传入的元素树以查找与您相关的信息.
对于选择器来说,这比使用任何DOM更简单,而不是手动遍历树,尤其是跨浏览器代码.
有没有办法使用jQuery选择器将数据传递给HTML5变异观察者回调？
jquery html5 greasemonkey jquery-selectors mutation-observers
推荐指数
解决办法
查看次数
用于创建新元素的Mutation Observer
我正在尝试在创建特定div时使函数关闭.用最简单的术语来说,我有这样的事情:
<a href="" id="foo">Click me!</a>
<script>
$("#foo").live("click",function(e) {
e.preventDefault();
$(this).append($("<div />").html("new div").attr("id","bar"));
});
</script>
以前,我有突变事件听取div#bar的创建 - 这样的事情:
$("#bar").live("DOMNodeInserted", function(event) {
console.log("a new div has been appended to the page");
});
是否有使用Mutation Observers的等价物？我尝试了attrchange.js功能你可以在DOM元素的样式对象更改后有一个javascript钩子触发器吗？但该插件仅检测元素何时被修改,而不是何时创建.
推荐指数
解决办法
查看次数
一个MutationObserver对象可以观察多个目标吗？
我想使用一个MutationObserver对象来观察我的一些DOM节点的变化.
文档提供了创建MutationObserver对象并在目标上注册它的示例.
// select the target node
var target = document.querySelector('#some-id');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
说我有上面的代码,但在它下面,我放置这个代码:
var target2 = document.querySelector('#some-other-id');
var config2 = {attributes: true, subtree: true};
observer.observe(target2, config2);
威尔observer:
- 现在正在观察2个目标？
- 它会停止观察 …
推荐指数
解决办法
查看次数
观察目标节点上尚不存在的突变
是否有可能在DOM节点上观察到尚不存在的突变？
例:
我的应用程序在某些时候创建了一个div : <div id="message" data-message-content="foo" data-message-type="bar" />.
我想留意这个div的创造和变化.
var mutationObserver = new MutationObserver(function(mutations){
// Some code to handle the mutation.
});
mutationObserver.observe(
document.querySelector('#message'),
{
attributes: true,
subtree: true,
childList: true,
characterData: false
}
);
);
现在这会返回一个错误,因为它#message是null(尚未创建div).
Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
一个明显的解决方案是观察body和检查是否有任何突变div#Message,但这似乎是一个坏主意/或可能不利于性能.
推荐指数
解决办法
查看次数
在'MutationObserver'上'观察':参数1不是'Node'类型
我正在创建Chrome扩展程序,并尝试在gMail撰写框的SEND按钮旁边添加一个小文本.
我正在使用MutationObserver来了解撰写框窗口何时出现.我通过观察一个带有类的元素来做这个,no因为compose box元素被创建为这个元素(class no)的子元素.
当用户单击撰写按钮并出现撰写框窗口时,我会使用该.after()方法在SEND按钮旁边放置一个元素.发送按钮类名称是.gU.Up.
这些是gMail的真正类名,也很奇怪.
以下是我使用的代码:
var composeObserver = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
mutation.addedNodes.forEach(function(node){
$(".gU.Up").after("<td> <div> Hi </div> </td>");
});
});
});
var composeBox = document.querySelectorAll(".no")[2];
var config = {childList: true};
composeObserver.observe(composeBox,config);
问题是我经常遇到以下错误:
Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'
有人可以帮忙吗？我已经尝试了很多东西,并在这里查看了其他答案,但仍然无法摆脱这个错误.
这是我的manifest.json文件:
{
"manifest_version": 2,
"name": "Gmail Extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon19.png",
"default_title": "Sales Analytics Sellulose"
},
"background": {
"scripts": ["eventPage.js"], …javascript gmail google-chrome-extension mutation-observers gmail-api
推荐指数
解决办法
查看次数
如何获得触发的MutationObserver的堆栈跟踪？
首先,这不是"如何创建变异观察者？" 发帖,我看过API.
我想知道是否有人知道如何显示突变发生时的"来源".它很可能是某种解决方法 - 我在API文档中看不到任何提及.
我试图找出一个元素display在其中style设置的位置none.
我的代码看起来像这样:
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName === "style") {
var extendedMutation = _.extend({}, mutation, {
newValue: $(mutation.target).attr("style")
});
console.log(extendedMutation);
}
});
});
observer.observe(row.element[0], { attributes: true, attributeOldValue: true });
我有服务器突变事件,他们看起来像这样:
{
addedNodes: NodeList[]
attributeName: "style"
attributeNamespace: null
newValue: "display: none;"
nextSibling: null
oldValue: ""
previousSibling: null
removedNodes: NodeList[]
target: li#d526d311-e6e0-4ef1-a3a1-f8686bbb468f.group
type: "attributes"
}
我只想知道JS来源的来源!有任何想法吗？
请注意我已经尝试过ctrl + f,但无济于事.
调试器/异常输出(尝试过针对Chrome的WebkitMutationObserver,结果相同):
推荐指数
解决办法
查看次数