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

您可以使用which is deprecated而不是使用DomSubtreeModified事件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中收到的对象的突变数组过滤操作。

希望它有所帮助，

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

1 个答案: