之前在做项目的过程中,某个页面出现左侧导航正常,右侧访问为空白区域的情况,之后定位问题是由于Adblock插件的原因,便有了下面对Adblock的小研究。
可以在开启Adblock时,访问页面查看效果。https://shineasyr.github.io/FELearning/test-block.html
页面中的id或者class中若有ad/AD,会被adblock插件屏蔽整个模块,如
ad-content
、ad-header
、ad-footer
等均被屏蔽,即dispaly:none;
。
<div class="ad-content">该模块会被屏蔽</div>
当然用户可以通过设置白名单的方式,解除对该页面的屏蔽,但这个方式成本较高且体验较差,因此还是推荐直接对相应dom的id/class名进行修改,来解决这个问题。
当然,如果此类广告屏蔽页面有可能会误伤网站原有页面或者影响页面的广告投放,可以通过js进行判断用户是否开启了adblock(可参考下方链接),进而在页面进行相应提示用户进行关闭当前网站的屏蔽等操作,如下图的知乎页面提示。
参考链接:
网友评论