在greasemonkey脚本中观察元素创建？

Question

当文档加载时,我需要在创建具有类"nav"的元素时收到通知.谷歌搜索我发现MutationObservers并认为他们将是完美的,但我似乎无法让它工作.

// ==UserScript==
// @name        ii-shortcuts
// @namespace   https://github.com/RedHatter
// @include     *
// @version     1
// @run-at document-start
// ==/UserScript==

var observer = new MutationObserver(function(mutations)
{
    mutations.forEach(function(mutation)
    {
        if (mutation.target.getAttribute('class') == 'nav')
            GM_log('nav creation');
    });    
});
observer.observe(document, {subtree: true, attributes: true, attributeFilter: ['class']});    

我也试过了.

// ==UserScript==
// @name        ii-shortcuts
// @namespace   https://github.com/RedHatter
// @include     *
// @version     1
// @run-at document-start
// ==/UserScript==

var observer = new MutationObserver(function(mutations)
{
    mutations.forEach(function(mutation)
    {
        if (mutation.addedNodes[0].getAttribute('class') == 'nav')
            GM_log('nav creation');
    });    
});
observer.observe(document, {subtree: true, childList: true});

但在下面的情况下,"导航创建"登录页面加载.我错过了什么？

Answer 1

几个问题(从大到小):

1. 文档第一次时,静态加载; 事件是childList事件,而不是attributes事件.

   例如,

   $("body").append ('<p id="foo" class="bar">Hiya!</p><p>blah</p>');
   

   生成一个 childList事件,而后续事件

   $("#foo").attr ("class", "bar2");
   

   生成一个attributes事件.
   
   

2. mutation.addedNodes[0]包含具有类的元素的几率nav几乎为零.这几乎总是一个文本节点.
   你需要检查整个阵列,加上target.

3. 不要getAttribute('class') == 'nav'用来检查课程.这将为没有该getAttribute函数的节点抛出异常,并且它将错过具有多个类的元素.例如:<p class="foo nav bar">...

   使用classList.contains()适当的节点类型.

4. @grant如果您使用任何GM_函数,请使用指令GM_log().无论如何都要使用授权,以确保沙箱保持打开状态.

5. 避免使用// @include *.特别是对于计时器和观察者,这可能会使浏览器和机器陷入困境.

6. 此信息适用于Firefox. Chrome在实现Mutation观察者方面存在很大差异.在加载页面之前,此类代码无法在Chrome中使用.

总而言之,脚本变为:

// ==UserScript==
// @name        _ii-shortcuts
// @namespace   https://github.com/RedHatter
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @run-at      document-start
// @version     1
// @grant       GM_log
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var MutationObserver = window.MutationObserver;
var myObserver       = new MutationObserver (mutationHandler);
var obsConfig        = {
    childList: true, attributes: true,
    subtree: true,   attributeFilter: ['class']
};

myObserver.observe (document, obsConfig);

function mutationHandler (mutationRecords) {

    mutationRecords.forEach ( function (mutation) {

        if (    mutation.type               == "childList"
            &&  typeof mutation.addedNodes  == "object"
            &&  mutation.addedNodes.length
        ) {
            for (var J = 0, L = mutation.addedNodes.length;  J < L;  ++J) {
                checkForCSS_Class (mutation.addedNodes[J], "nav");
            }
        }
        else if (mutation.type == "attributes") {
            checkForCSS_Class (mutation.target, "nav");
        }
    } );
}

function checkForCSS_Class (node, className) {
    //-- Only process element nodes
    if (node.nodeType === 1) {
        if (node.classList.contains (className) ) {
            console.log (
                'New node with class "' + className + '" = ', node
            );
            // YOUR CODE HERE
            //GM_log ('nav creation');
        }
    }
}