如何屏蔽随机id、随机class的div元素


如何拦截随机生成型 广告。(ABP、Adguard、广告净化器等通用规则)


尽管像Adguard、广告净化器这种都自带了快捷选择网站元素,智能屏蔽指定元素的功能,但是之前有个粉丝问我有个网站的广告用Adguard屏蔽不掉。
我看了一下:发现那个广告是每次刷新页面就随机生成的,所以才屏蔽不掉。
想要屏蔽的话需要手动写过滤规则,这个其实我之前我也没写过,有人问我就临时学了一下,这里记录一下解决过程。

一、解决过程

这种网站比较多,这里举一个例子:https://m.tohomh123.com/
这个网站在电脑端是没广告的(https://tohomh123.com/),在手机端才有广告。
总之可以看到这个网站的随机广告类型非常多!非常非常多!
想要完全屏蔽的话,得需要写很多条规则。
广告类型1:
20190507142301.png
广告类型2:
20190507142336.png
还不止这些……大概有6、7种广告
多刷新几次,仔细观察后可以发现:这些广告并不是完全随机的 id ,id都是有前缀或后缀的。
学过点网页基础就知道屏蔽广告的原理都是通过元素选择器来屏蔽网页内的固定元素。
所以对于这种随机id、随机class的广告,想要屏蔽就需要从其

2

这里就想到了,想解决部分随机的元素,需要用到通配符来代替这些随机的部分。
这里搜到了这两个帖子:

是否可以支持选择器通配符*

Q:很多网站的广告链接失效,原因是通过class选择或者id选择,广告模块的id是随机生成的,如id为ADTOPLB988的模块,在第二次打开则变成了ADTOPLB_923,是否可以支持输入ADTOPLB代表任意字符。
A:xxx.com##div[class*="ADTOPLB_"]通配符这样用的。。。

广告无法拦截

Q:如果id后面的数字每次请求都会随机变化如何处理,通配符语法如何写呢?
如:xunyingwang.com###__jclm_r_b_62144变成了xunyingwang.com###__jclm_r_b_62145
是否可以写成xunyingwang.com###__jclm_r_b_*
A:大兄弟元素通配符是这样写的。。。xunyingwang.com##div[id*="__jclm_"]
我照上面的办法试了一下,发觉不起作用

3

后来又花了几分钟谷歌,后来发觉这应该就是一个CSS选择器。于是去w3school上查看了一下:CSS 选择器参考手册
果然是:
20190507143731.png

4

于是上面的屏蔽规则的意思就很简单了:
xxx.com##div[class*="ADTOPLB_"]
选择其class属性中包含 “ADTOPLB_” 子串的每个
元素。

xunyingwang.com##div[id*="__jclm_"]
选择其id属性中包含 “__jclm_“ 子串的每个
元素。

5

这时我突然转换了一下思考方式,这种情况应该直接找官方文档来看,于是我找到了ABP的官方说明文档:撰写 Adblock Plus 过滤规则
查看官方文档,再根据网站相应情况,我写了如下几条规则。

二、最后我写的屏蔽规则如下

https://img.zxyunsheji.com/img/*会拦截所有这个链接下的东西(主要是图片)
m.tohomh123.com###js-slider 会隐藏所有id属性为js-slider的 div 元素

m.tohomh123.com##div[id*="afff"] 会隐藏所有id属性包含afff 的div元素
m.tohomh123.com##img[id*="afff"] 会隐藏所有id属性包含afff 的sva元素
m.tohomh123.com##sva[id*="afff"] 会隐藏所有id属性包含afff 的img元素

m.tohomh123.com##div[id^="p"] 会隐藏id属性包含p的 div 元素
m.tohomh123.com##div[class^="i"] 会隐藏class属性包含i的 div 元素
加入以上规则,刷新10多次,终于再没看见一条广告。

二、参考资料

后来我发觉查看官方文档会解决的更快:
这篇文章的标题是我当初开始着手解决问题时进行搜索的关键词,写这一篇是希望能帮到同路人。

此博客中的热门博文

Blogger搭建国内可正常访问博客(超详细教程)