最近一直在写一个 WebApp,在手机上测试时 Chrome/Firefox 都没问题,但在一些国产浏览器比如夸克之类上面总会出奇怪的部件消失或页面空白问题,比如一个好好的按钮就特么离奇地没了。因为面向技术群体想必国产浏览器用户不多也就没细究直接打算放弃这些用户,同时心里对国产浏览印象更差了:好好的别人核心拿过来就就算了还魔改得面目全非。。。
因为是果黑所以没买 Mac,但又要调试下 webkit 页面,所以只能用系统自带的 Web 浏览器了(我是 GNOME 用户,自带浏览器用的 webkit 内核)。 在解决了一堆 webkit bug 后,发现部件离奇消失的 BUG 竟然又来了,我特么直接吐了果然是三流内核,不过还好现在不在手机上,这里有自带的开发者工具,在仔细研究了后发现:这个浏览器默认启用了 AdBlock,我把它的 AdBlock 列表导出来一看,好家伙,3584 行!这个 CSS 文件会直接用在每个页面上,所有匹配的类直接就消失。
文件内容大概这样:
.ad-box,
.b_ad,
.ob-hover,
.dfp_unit,
... {
display: none !important;
}
我用的是 CSS in JS 方案,类名是随机生成的 js-开头的类,然后我的类 .js-ad 直接就被浏览器干掉了!! 这个列表应该是个通用列表,所有带 AdBlock 的应该都是类似路子,类名里千万不要有 ad 这二个字母。 估计国产浏览器也是因为这个,真是错怪它们了(并没有)。
1
Cooky 2021-12-26 13:31:40 +08:00 2
adblock 越来越不好用了,现在都用 ublock origin
|
3
avrillavigne 2021-12-26 13:45:26 +08:00
不会吧 不会吧 开发居然不会装广告屏蔽的 狗头.gif
|
5
xxb 2021-12-26 13:47:27 +08:00 via iPhone
10 年前我还是网页重构时就这样了,class 必须避开 ad 字样,这个坑竟然如此长寿
|
6
rabbbit 2021-12-26 13:48:34 +08:00
夸克用的是什么内核,是 UC 吗?网上搜了一圈没找到.
注意到夸克和 UC 有很多相同的 BUG, 例如忽略 pushState,还有楼主提到的不显示带 ad 的标签(好像就只有这俩会干这事). |
7
4ark 2021-12-26 13:49:19 +08:00 via iPhone
在特定网站不运行就好了
|
8
makelove OP |
9
rabbbit 2021-12-26 14:10:58 +08:00
搜了一下夸克内核
2.4.0.983 Blink 内核 2.4.0.984 U4 内核 然后费下载了个试了下(官网下载链接让火狐给屏蔽了打开直接报红...) 5.4.9.201 基于 Quarkium 内核 (魔改 chromium ?) 内核换来换去,还好不用兼容这个浏览器. |
10
fs418082760 2021-12-26 14:26:19 +08:00 1
@Cooky 后来转 adguardhome 了
|
11
Mitt 2021-12-26 14:45:58 +08:00 via iPhone
不仅如此 他们默认启用一个屏蔽挖矿的规则,这本身没什么,但这个规则直接匹配顶级域,把区块链常用的顶级域全加进去了,然后就一大堆网站被拦截了,而且反馈了他们也丝毫没有删的意愿,不能理解
|
12
512357301 2021-12-26 15:13:26 +08:00 via Android 1
这种对开发来说算常识吧,我在手动屏蔽一些广告的时候,看到广告的类名带 ad ,那我真是感谢开发者八辈祖宗,太省事了
|
13
superfatboy 2021-12-26 15:18:21 +08:00
国产浏览器都这个揍性,一般尽量避开“ad”这个词
|
15
cocolate 2021-12-26 19:10:09 +08:00
我用的 adguard
在网关传输层直接滤掉广告的包比较好 现在手写类名已经式微了,哪天广告也用上生成器,元素过滤怕是就废了 |
16
peasant 2021-12-27 09:51:14 +08:00
这问题我几年前就遇到了,从那以后写样式名跟文件名都避免出现 ad
|
17
lockiee 2021-12-27 09:56:28 +08:00
后台的一个广告管理列表的接口因为 url 带单词 advertisement 被拦截掉~ uBlock Origin 亦是如此
|
19
auchan 2021-12-27 18:12:43 +08:00
之前也遇到过一次
所以一般都不把类名去 ad 这种太敏感的 |