是否可以同时运行两个 MutationObservers？

Question

我正在尝试使用 Greasemonkey 为 Facebook 的 时间轴日志 页面制作脚本。

我需要捕捉两种事件：

1) URL 更改（因为更改是在 Facebook 上使用 AJAX 进行的，因此页面没有完全重新加载，脚本也没​​有）。

2)一些元素的外观。

我尝试制作两个 MutationObservers，一个用于捕获 URL 更改，另一个用于捕获元素外观。 但它似乎只触发了一个（url_mutation_observer）。

这是我的一些代码：

function handling_url_change(mutations){
    mutations.forEach(function (mutation){
        if (check_timeline()){
            if (!buttons_added){
                var element = $(document).find(button_location);
                if (element && element.length > 0){
                    add_buttons();
                }
            }
        }else if (set){
            reset();
        }
    });
}

function handle_deletion(mutations){
    mutations.forEach(function (mutation){
        if (mutation.addedNodes){
            for (var i = 0; i < mutation.addedNodes.length; i++){
                if (isheader(mutation.addedNodes[i])){
                    mutation.addedNodes[i].remove()
                }else if (isactivity(mutation.addedNodes[i])){
                    delete_activity(mutation.addedNodes[i]);
                }
                return true;
            }
        }
    });
    return true;
}

/*
** Mutation observers :
*/

var url_mutation_observer = new MutationObserver(handling_url_change);

var delete_mutation_observer = new MutationObserver(handle_deletion);

我有一些问题：

1) 不是每个 MutationObserver 都捕捉到每个突变吗？

2) 添加按钮（就像我的脚本一样）是否算作突变？

3) 如果我添加一个带有由添加此类元素触发的回调函数的元素。不会有递归和死循环的风险吗？

4) 是否可以使用 MutationObserver 仅捕获 URL 更改，而仅使用其他元素捕获某些元素的外观？ （为了确保每个人只捕获他需要捕获的内容，我不知道该怎么做，我使用检查页面的函数检查了 url，而不是使用检查突变是否为“UrlChangeMutation”的函数或类似的东西）。

5) 我能做什么？

注意： 如果你也想，这里是带有console.log() 调试调用的完整脚本。 http://dpaste.com/3NWV08J

NB2： 如果您还希望这个脚本没有 console.log() 调用： http://dpaste.com/3AH8YF5

Answer 1

首先，请注意您的for 循环已损坏，因为它包含一个无条件的return true。

1) 不是每个 MutationObserver 都捕捉到每个突变吗？

是的，因为您正在观察document。

2) 添加按钮（就像我的脚本一样）是否算作突变？

当然。

3) 如果我添加了一个带有由添加此类元素触发的回调函数的元素。不会有递归和死循环的风险吗？

当然。
（虽然这将是一个非阻塞循环，这意味着页面可能不会冻结。）

4) 是否可以使用 MutationObserver [...] 仅捕获 URL 更改？

不，这不是 MutationObservers 所做的。来自MDN：

MutationObserver 为开发人员提供了一种对 DOM 中的更改做出反应的方法。

请注意，“UrlChangeMutation 或类似的东西” 不存在。

4) [...] 并且只用另一种元素来捕捉某些类型的元素的外观？

您无法指定过滤器，但您可以在回调函数中检查受影响的元素是否符合您的条件。
见鬼，你可以访问每个节点的所有方法和属性，你还需要什么？

5) 我能做什么？

我的建议？谷歌更多。
例如，“javascript on url change”的第一个结果是：

How to detect url change

我建议您阅读DOM，因为您似乎根本不知道那里存在许多东西。

Answer 2

我有一个错误：observer.observer() 不是函数。 observer.observe() 是：http://dpaste.com/3AH8YF5#line-254