Question

我喜欢在我不拥有或控制的页面上运行自定义脚本。很多时候，这些页面都动态创建了我想要应用函数的内容。

这可能吗？如果是这样，我该怎么做？理想情况下，我正在寻找一些实时jQuery的live方法，除了绑定像click这样的事件，它更像是在DOM中加载元素时发生的事件。 load事件对某些元素有用，但我并不认为...

对于这个问题，假设您无法查看或更改插入DOM节点的代码。我想要一种可以在用户脚本或书签中使用的技术，可以在多个不相关的站点中使用。

编辑：我正在寻找在我的反转颜色书签上使用的东西：JavaScript: Invert color on all elements of a page

Answer 1

假设您正在运行Firefox或Chrome等浏览器，您可以收听DOMNodeInserted事件：

$(document).on('DOMNodeInserted', function(e) {
    $(e.target).css({ color : '#c00' });
});

$('body').append('<div>test</div>');

小提琴：http://jsfiddle.net/VeF6g/（可能在IE中失败）

<强>更新：该事件已被弃用。你应该使用MutationObserver：

var observer = new MutationObserver(function(mutationList) {
    for (var mutation of mutationList) {
        for (var child of mutation.addedNodes) {
            child.style.color = '#c00';
        }
    }
});
observer.observe(document, {childList: true, subtree: true});

// ready? Then stop listening with
observer.disconnect();

此处提供更多信息：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

这是一种处理节点插入事件的好方法。使用css为要添加的元素设置动画。

<style type="text/css">

/* set up the keyframes; remember to create prefixed keyframes too! */

@keyframes nodeInserted {  
from { opacity: 0.99; }
to { opacity: 1; }  
}

#parent > button {
animation-duration: 0.001s;
animation-name: nodeInserted;
}

</style>

#parent是div的id，我将在其中添加按钮＆＃39; s 动态。

<script type="text/javascript">

    var insertListener = function(event){
        if (event.animationName == "nodeInserted") {
            // This is the debug for knowing our listener worked!
            // event.target is the new node!
            console.warn("Another node has been inserted! ", event, event.target);
        }
    }

    document.addEventListener("animationstart", insertListener, false); // standard + firefox
    document.addEventListener("MSAnimationStart", insertListener, false); // IE
    document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

    setInterval(function(){

        var btn = document.createElement("BUTTON");

        var t = document.createTextNode("CLICK ME");       // Create a text node

        btn.appendChild(t);         

        document.getElementById("parent").appendChild(btn);

    }, 2000);

</script>

Answer 3

如果您无权访问 jQuery 等库，则此处的语法仅为 - JavaScript ：

document.addEventListener('DOMNodeInserted', nodeInsert)

function nodeInsert () {
  event.srcElement.style.color = '#ffffff'
}

我认为它应该适用于大多数浏览器。

Answer 4

这很难实现，因为没有可行的事件来响应DOM的变化。我宁愿坚持参加活动代表团。

但是有一些事件你可能觉得有用或有趣。在Mozilla Developer Network's list of DOM events上你可以看到例如：

DOMNodeInserted，
DOMNodeInsertedIntoDocument，
DOMNodeRemoved，
DOMElementNameChanged，

然而，所有这些都标记为W3C草稿。

Answer 5

检测节点插入的一般方法是使用DOMNodeInserted突变事件。

我对每个节点都很感兴趣。我正在改变页面上所有内容的颜色。

为此，一个更好的解决方案是注入一个动态样式表，足以使用!important标志。如果您只想更改颜色，我建议使用Stylish扩展名（Stylish for Chrome）而不是GreaseMonkey。

插入动态创建的DOM节点的处理程序

5 个答案: