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

Question

当您在 Facebook 聊天中链接到某个网站时，我总是单击小 x，这样预览就会消失。我讨厌这样做，因为我每天可能发送数百个链接，而预览只是垃圾 9/10 次。

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

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

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

但是，当我要检查链接何时发布时......我们在这里遇到了一些棘手的问题。这是我迄今为止尝试过的：

$(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

您可以使用MutationObserver，而不是使用DomSubtreeModified 事件which is deprecated。

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 中接收到的对象的突变数组来过滤操作。

希望对你有帮助，