自己写油猴脚本屏蔽广告，有什么办法在出现后删除元素吗？
LeeReamond · 2022-09-04 04:15:15 +08:00 via Android · 1783 次点击这是一个创建于 817 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，通过 js 控制页面，比如 csdn 看文章时候把各种乱七八糟占用页面位置的元素删除。
我目前用过两种做法，一种是等页面加载完成的 api 回调，然后再调用删除事件。这种的缺点是慢。
另一种是每隔 0.1 秒检测一下页面是否出现某元素，然后调用删除，会略微占用资源，而且感觉不太优雅。
目前 js 的 api 里有办法注册一个事件比如某某元素加载完成后调用回调之类的吗？
 |
1
wjfz 2022-09-04 05:17:13 +08:00
|
 |
2
LeeReamond OP @wjfz 我的问题偏向实现细节，而不是解决 CSDN 广告问题
|
|
3
wjfz 2022-09-04 05:20:13 +08:00
@LeeReamond 可以参考下这个脚本有没有你想要的解决方案嘛
|
 |
4
mxT52CRuqR6o5 2022-09-04 06:11:12 +08:00 via Android
监听 dom 添加事件
|
 |
5
wxf666 2022-09-04 06:45:17 +08:00
|
 |
6
Track13 2022-09-04 08:25:10 +08:00 via Android
display:none 不就好了，为什么要删除。这样就不用管它什么时候出现。
|
 |
7
Trim21 2022-09-04 09:25:39 +08:00 via Android
MutationObserver
|
 |
8
flyhaozi 2022-09-04 11:49:44 +08:00
看看元素是怎么插入的，重写对应的原生方法进行过滤，比如 appendChild ，虽然是比较糟糕的实践，用在用户脚本里也不是不行
|
 |
9
Puteulanus 2022-09-04 15:11:11 +08:00
https://github.com/muicss/sentineljs
虽然挺久没更新了，但很好用 |
 |
10
yunyuyuan 2022-09-04 17:33:21 +08:00
MutationObserver ，或者劫持 appendChild,insertBefore 这类方法
|
 |
11
wdssmq 2022-09-04 21:53:50 +08:00  1
MutationObserver
const fnElChange = (el, fn = () => { }, onetime = true) => { const observer = new MutationObserver((mutationRecord, mutationObserver) => { // _log('mutationRecord = ', mutationRecord); // _log('mutationObserver === observer', mutationObserver === observer); fn(mutationRecord, mutationObserver); if (onetime) { mutationObserver.disconnect(); // 取消监听，正常应该在回调函数中根据条件决定是否取消 } }); observer.observe(el, { // attributes: false, // attributeFilter: ["class"], childList: true, // characterData: false, subtree: true, }); }; |
 |
12
f0rger 2022-09-04 22:46:59 +08:00 via iPhone
|
 |
13
lisongeee 2022-09-05 02:22:03 +08:00
监听 dom 树结构的变动一般用 `MutationObserver` 即可，不过某些广告也会通过 `MutationObserver` 自我判断是否显示，结果就是一直循环添加删除，这种比较有难度，csdn 应该不会有。
另外要开发油猴脚本可以用 [vite-plugin-monkey.git]( https://github.com/lisonge/vite-plugin-monkey.git) |
Select Language