javascript - 是否可以同时运行两个 MutationObserver？

Question

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

我需要捕获两种事件:

1) URL 更改(由于更改是通过 Facebook 上的 AJAX 进行的，因此页面未完全重新加载，脚本也未完全重新加载)。

2)部分元素的外观。

我尝试制作两个 MutationObserver，一个用于捕获 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 循环已损坏，因为它包含无条件返回 true。

1) Isn't each MutationObserver catching every mutation?

是的，因为您正在观察文档。

2) Is the addition of a button (like my script does) counted as a mutation?

当然。

3) If I add an element with a callback function triggered by the addition of such element. Isn't there a risk of recursion and infinite loop?

绝对是。
(但这将是一个非阻塞循环，这意味着页面可能不会卡住。)

4) Is that possible to catch only the URL change with a MutationObserver [...]?

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

MutationObserver provides developers a way to react to changes in a DOM.

请注意，“UrlChangeMutation 或类似内容”不存在。

4) [...] and to catch the appearance of only some kinds of elements with the other one?

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

5) What could I do?

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

How to detect url change

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