Question

我是网站https://www.lingq.com的常规用户。该网站最近添加了一个“共享”侧面板，在页面加载后几秒钟从左侧滑入。这很烦人，它掩盖了网站上的部分文字。过了一会儿，我真的厌倦了每次都要手动点击它。我正在使用GreaseMonkey删除它，但问题是当document.ready发生时元素还没有存在。

我通过使用超时来解决这个问题。

jQuery(document).ready(function ()
{
  setTimeout(function () {
    jQuery('#at4-share').remove()
  }, 5000)
  setTimeout(function () {
    jQuery('#at4-share').remove()
  }, 10000)
});

经过一些实验，我选择了两个计时器。第一个（5秒后）通常会在它出现的那一刻消除它。第二个是那里因为有时边栏不会及时出现。该网站在加载时会进行相当多的javascript处理，只有在完成后才能显示该内容。

虽然我的解决方案有效，但它粗糙而丑陋。我想要一个可靠地移除面板的解决方案，无论它出现多长时间。理想情况下，我甚至不应该在页面上看到面板。有什么建议吗？

Answer 1

它们目前在Firefox中以MutationObserver实施，在Chrome中以供应商为前缀WebKitMutationObserver实施：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

此示例侦听document及其整个子树上的DOM更改，它将触发元素属性更改以及结构更改。草案规范有完整的有效突变监听器属性列表：

<强>的childList

如果要观察目标儿童的突变，则设置为true。

<强>属性

如果要观察到目标属性的突变，则设置为true。

<强> characterData

如果要观察目标数据的突变，则设置为true。

<强>子树

如果突变不仅仅是目标，而且也是目标，则设置为true   要观察后代。

<强> attributeOldValue

如果将attributes设置为true并将target设置为属性值，则设置为true   在需要记录突变之前。

<强> characterDataOldValue

如果characterData设置为true并且之前是target的数据，则设置为true   需要记录突变。

<强> attributeFilter

如果不是全部，则设置为属性本地名称列表（不包含名称空间）   需要观察属性突变。

这应该适合您：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    jQuery('#at4-share').remove();
});

observer.observe(document, {
  subtree: true
});

Answer 2

我想要一个可靠地移除面板的解决方案，无论如何它需要很长时间才能出现。理想情况下，我甚至不应该看到页面上的面板。

为什么不简单地用css隐藏它？无论加载页面需要多长时间，默认情况下它都会被隐藏。请注意，它不会删除它。

#at4-share{
  display:none;
}

我试过这个：GM_addStyle（'＃at4-share {display：none;！important}'）什么都不做

有一项更正，!important位于;之前：

GM_addStyle('#at4-share{display:none !important;}')

如何从document.ready中不存在的网页中删除UI元素？

2 个答案: