单击动态更改的元素上的按钮

Question

当你 link 到 Facebook 上的某个站点聊天时，我总是单击小 x，这样预览就会消失。我讨厌这样做，因为我每天可能发送数百个 link，而预览只有 9/10 次是垃圾。

我正在创建一个用户脚本来解决这个问题，但由于它是动态加载的，所以我无法在按钮出现时简单地单击它。这是我想要点击按钮时的样子：

$(".fbNubFlyoutAttachments").find("button:contains('Remove')").click();

基本上它会找到 class fbNubFlyoutAttachments，然后找到包含 "Remove" 的按钮。然后它单击该元素，预览消失。很简单。

但是，当我要检查 link 何时发布时..我们在这里遇到了一些棘手的事情。这是我到目前为止尝试过的：

$(document).bind("DOMSubtreeModified ", ".fbNubFlyoutAttachments", function(){
    $(".fbNubFlyoutAttachments").find("button:contains('Remove')").click();
});

不过。 $(document).bind("DOMSubtreeModified" 触发很多，因为 DOM 变化很大，导致堆栈几乎立即被填满，然后页面冻结。只做 $(".fbNubFlyoutAttachments").bind("DOMSubtreeModified" 会很好，但这是不可能的（据我所知）。

这是我目前所做的，它有效，但可能需要一秒钟的时间才能触发，并且它在不需要它的情况下使用计算资源：

setInterval(function() {
    $(".fbNubFlyoutAttachments").find("button:contains('Remove')").click();
}, 1000);

我怎样才能通过我的用户脚本以好的方式做到这一点？任何帮助表示赞赏！谢谢。

Answer 1

而不是使用 DomSubtreeModified 事件 which is deprecated you can use MutationObserver。

DOM mutation events 在性能和稳定性方面存在问题，所以这可能是将 DomSubtreeModified 事件绑定到文档时全部冻结的原因，更多信息 here.

所以你可以尝试在tampermonkey中使用MutationObserver如下：

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.facebook.com/*
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js

// ==/UserScript==
/* jshint -W097 */
'use strict';


$(function() {
    // element to observer
    var body = document.querySelector('body');

    // create the trigger function
    var observer = new MutationObserver(function(mutations, observer) {
        $(".fbNubFlyoutAttachments").find("button:contains('Remove')").click();
    });

    // configure the element to observe and the changes you want to check
    observer.observe(body, { subtree: true, childList : true, characterData : true});


});

同时检查 attributes of the observer method.

此外，您可以根据 MutationObserver callback 中接收到的对象突变数组过滤操作。

希望对您有所帮助，

单击动态更改的元素上的按钮

Click a button on dynamically changed element

javascript

greasemonkey

userscripts

tampermonkey