jquery - DOMNodeInserted 无法正常工作

Question

我有个问题 ..

“DOMNodeInserted”没有按预期工作。我不确定我是否正确使用它。

有任何想法吗 ？

Answer 1

_{编辑：使用MutationObserver进一步向下滚动以获得更好的方法。}

---

在页面加载时构建 DOM 时，不会DOMNodeInserted触发任何事件。我认为没有办法让 HTML 在呈现之前通过您的过滤器（或者如果有我不知道的话）。

相反，过滤DOMContentLoaded可能足够快，让用户不会注意到差异（或至少不会打扰太多）。

当然，您必须监听 DOM 中的动态变化（例如，通过 AJAX 加载的内容等）并对其进行动态过滤。MutationObserver可能会派上用场。

看看这个演示代码，让你开始使用这种方法：

manifest.json
（请注意，要使其正常工作，您不需要以下任何内容：
browser_action、、、、page_action）backgroundpermissions

...
"content_scripts": [
    {
        "matches": [
            "http://stackoverflow.com/*",
            "http://www.stackoverflow.com/*"
        ],
        "js":         ["content.js"],
        "run_at":     "document_start",
        "all_frames": true
    }
],
...

内容.js

// Implement your filtering mechanism
// Good luck trying not to break the HTML :)
var doFilter = function(elem) {
    // Demo filtering: highlighting links 
    // (and possibly breaking HTML in many pages)
    elem.innerHTML = elem.innerHTML.replace(
        /(<a[^>]*)(>[^<]*<\/a>)/ig,
        "$1 style=\"background-color: yellow;\"$2");
};

window.addEventListener("DOMContentLoaded", function() {
    doFilter(document.body);
});

---

更新

这是使用MutationObserver的另一种方法，它甚至更快。使用这种方法，更改对用户应该是“透明的”。
（这仍然需要 twicking，例如处理动态节点更新。）

内容.js

// Highligth the element by giving it a yellow background
var doFilter = function(link) {
    link.style.backgroundColor = "yellow";
}

// Create a MutationObserver to handle events (i.e. filtering <a> elements)
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes) {
            for (var i = 0; i < mutation.addedNodes.length; i++) {
                var node = mutation.addedNodes[i];
                if (node.nodeName == "A") {
                    doFilter(node);
                }
            }
        }
    });
});

// Start observing "childList" events in document and its descendants
observer.observe(document, {
    childList:     true,
    subtree:       true
});

如果您决定采用MutationObserver方法，那么这个 JS 库应该可以让您的生活更轻松：mutation-summary