你被adblock坑过吗？

    最近上线一个新版本，需要在导航增加一个app的下载入口（一个图片链接），然后经过了正常的原型图、设计、切图、上线的过程，一切都是那么顺利。上线之后，像往常一下会让产品进行确认，所有的调整和优化都没有问题，可以正常的展示，但是发现一个奇怪的现象，在chrome下app的入口始终看不到。然后我就在我的机器上几乎看了所有的浏览器（chrome、firefox、safari、IE系列、opera），都能看到。于是我理所当然的做了以下几步：

• 让产品清除缓存看一看，之前有过这种情况，由于样式资源存在缓存导致没有正常显示，结果，没有显示
• 怀疑是不是那台机器没有上啊（我很不想出现这个，这会导致上线脚本等一系列问题），去看了产品的机器，发现其他调整了的都能正常运行，应该可以排除这个问题了

    

    紧接着我就想到了是不是浏览器的插件有影响呢？是的，在看插件的时候，我看到了它，这个让我醉生梦死的她。禁用之后，发现可以正常显示了。进一步跟了一下，到底触发了一个什么样的规则，导致我一个正常的功能入口，被当做广告给拦截了。看了一下源码发现，我使用了一个nav-ad的类名，就是这个触发了adblock的规则。当然知道了什么原因导致的问题，很快就可以正常的解决这个问题。

 

    但是事情还没有完，这只是一个点，我想了一下，如果不把这个规则搞清楚的话，以后还会触发其他我们现在未知的的一些规则，导致在用户那里不能正常展示。于是我学习了一下，adblock的撰写规则，这里跟大家一块儿学习一下。

• 基本过滤规则

            要拦截的url地址，如：http://example.com

• 定义例外规则

            可以使用@@表示后面的是例外，不会拦截；也可以配合|使用。如：@@|http://example.com

• 匹配网址开头和结尾

            使用管线符号|表示最前端或者最末端。如：阻挡以swf结尾，swf|；阻挡以http开头的，|http。

• 标记分隔符

            通常需要接受过规则的任何分隔符，分隔符可以除了字母、数字或_-.%之外的任意字符。

• 注释

            使用！作为注释的开始，也可以在注释的上面书写任何想些的文案。

• 制定过滤规则选项

        

• 使用正则表达式

            通过正则表达式书写过滤规则，但是出于性能考虑，不建议使用。

• 元素隐藏

            之前讲到的规则，只要匹配上请求都无法发送。有一些拦截必须要发送请求之后才能知道是否真的需要拦截，才是可以使用到元素隐藏的规则。发现请求的数据触发了拦截的规则，此时会隐藏相应的元素。一般使用选择器进行匹配，如：http://example.com###coner-flash http://example.com##.floatgg等等            

 

    学习了撰写规则，然后在大概了解一下easylist（https://easylist-downloads.adblockplus.org/easylistchina.txt）等规则，大概知道什么情况下会触发这些规则。进而，在开发过程中，可以避免掉入这些坑里面。

 

    总结一下：通过上面的学习可以再根据easylist查看一些经常会被拦截的id、class命名，然后避免使用包含ad的类名、class名、文件名；避免使用被拦截域名下的资源；很多公司的打点统计会被拦截，这个可以通过bd联系一下，看看是否可以解决。如果打点统计被拦截之后，量足够大的话，是会直接影响数据的准确性的，所以这块儿需要重视一下。

 

 

参考资料：

https://adblockplus.org/zh_CN/filters#basic 撰写adblock Plus过滤规则

https://easylist-downloads.adblockplus.org/easylistchina.txt 过滤规则

http://bbs.kafan.cn/thread-1674209-1-1.html adblock plus官方规则说明反馈贴