Win10论坛

Win10正式版系统下载主题平板

重定义Modern UI,打造完美Windows全新体验

Windows10下载|安装|新手宝典|必备软件

搜索
查看: 61608|回复: 923

[分享] 【9号更新】IE11自带广告过滤 自定义跟踪保护列表+CSS样式表屏蔽广告示例(以远景为例)     [复制链接]

Rank: 9

UID
1251953
帖子
2471
PB币
261
贡献
0
技术
1820
活跃
630
发表于 2013-12-18 19:44:57 |显示全部楼层
本帖最后由 劳维明 于 2014-6-10 09:40 编辑

IE11 浏览器可使用自带功能CSS样式表+跟踪保护列表可过滤掉大部分广告(非视频广告,会黑屏)

下面以远景为例,分享一下DIY广告过滤一点经验。

首先是CSS样式表。这里有必要先了解一下CSS的一些基本概念。
CSS,全称"Cascading Style Sheets",中文翻译为级联样式表
要过滤网页中的广告,首先需要定位广告元素的位置,称为选择元素
网页代码中的最重要的元素之一莫过于div标签,它用来标识CSS单元的位置和层次
其他常用的标签有:body、script、table、td、span、a、ul、li、link等。
为了区别具有相同标签的不同元素,我们常用class(类)和id(序号)来标识不同的元素,称为选择器
CSS有两种基本表示方式,基本格式是选择器+属性声明
第一种:
  1. 标签[选择器="标识"] {属性:值}
复制代码

例如:
  1. div[class="focus"]{display:none !important;}
复制代码
解析:div为标签,class为选择器,引号内为标识,display为属性,none为属性的值,!important是提高指定样式规则优先级的语法。其他的符号为固定格式。上面这句CSS规则的作用是隐藏类标识为focus的div元素。
多标签多属性的CSS格式如下:
  1. 标签1[选择器1="标识1"],标签2[选择器2="标识2"],标签3[选择器3="标识3"] {属性1:值1;属性2:值2;属性3:值3;}
复制代码
例如:
  1. div[class="a_pb"],ul[class="forum_top"],span[id="weixinqr"]{text-align:center;color:red;}
复制代码
这句CSS规则的作用是指定的三个元素中的文本居中对齐,颜色红色。

第二种表示方式,用符号来代替选择器从而简化CSS规则:
class类选择器用符号“.”(英文句号)表示,ID序号选择器用符号“#”(Shift+3)表示:
  1. .类标识{属性:值;}

  2. 标签#ID标识{属性:值;}
复制代码
例如:
  1. .focus,
  2. div#ckepop,
  3. span#weixinqr,
  4. {display:none !important;}
复制代码
PS:一个元素一行能使代码更加清晰。

上面介绍了CSS的基本格式要求,下面再介绍一下需要用到的符号的意义

通过对要过滤的广告网页元素,右键“检查元素”,可查看到目标元素对应的网页源码,

11212.jpg


细心的朋友可能发现了,有些标签并没有用选择器指定其唯一标识,或者其标识是一组随机字符,每次刷新网页后都不一样了,例如:
  1. <div> /* 没有指定标识 */
  2. <script type="text/javascript">
  3. /*自定义标签云,footer*/
  4. var cpro_id = "u1353007";
  5. </script>
  6. <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript">
  7. </script>
  8. </div>


  9. <div class="hjkyzABF"> /* 标识是随机字符 */
  10. <div>
  11. <script type="text/javascript">
  12. /*论坛-资讯下-960*/
  13. var cpro_id = "u473858";
  14. </script>
  15. <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript">
  16. </script>
  17. <img border="0" src="http://cdn.pcbeta.img.inimc.com/static/image/pcbeta/wenzhang.jpg">
  18. </div>
  19. </div>
复制代码
变化的东西我们是没有办法的,但是总有某些东西是固定不变的!正所谓你有张良计,我有过墙梯!
我们可以利用已经指定其唯一标识的元素来确定目标元素的相对位置。
这里涉及父级元素、同级元素、子元素这几个概念。

网页代码中,每个元素都包含开始和结束的标识,
开始标识的格式为<标签>,结束标识的格式为</标签>,例如:
  1. <div class="123">
  2. <ul>
  3. <div>内容1</div>
  4. <li>内容2</li>
  5. <li>内容3</li>
  6. </ul>
  7. </div>
复制代码
内容1、2、3之间互称同级元素,标签“li”相对于标签“ul”,前者为子标签,后者为父标签,标签“ul”相对于标签“div”,前者为子标签,后者为父标签。子标签和父标签是相对而言的,他们之前是包含关系。

父标签和子标签之间相对位置用符号“>”表示:
  1. 父元素>子元素
复制代码
例如:
  1. div[class="123"]>ul>li
复制代码
这个选择器表示的是class类标识为123的div父元素下的第一个ul元素的第一个li子元素,指的是内容2。

同级元素之间相对位置用符号“+”表示:
  1. div[class="123"]>ul>div+li+li
复制代码
这个选择器表示的是内容3。

下面再介绍一个强大选择器——“:nth-child()”伪类选择器。
基本格式为:
  1. 标签:nth-child(序号) /* 标签为可选,可不指定 */
复制代码
例如,指定内容3为目标元素:
  1. div[class="123"]>ul>li:nth-child(2)
复制代码
这个选择器的缺点是专一性不强,通常一个网站不同页面都有相同类标识的标签时,容易造成误选择。这里可以通过给它指定其它的筛选器来避免这种情况的发生。由于涉及更高级的CSS语法,这里不做讨论。

通过上面的多种方法,我们就可以指定网页中任意位置的广告元素了。

IE的CSS样式表过滤广告的基本原理是网页加载后隐藏,并不会阻止广告元素的加载。

屏蔽广告元素的基本语法是
  1. 广告元素1,
  2. 广告元素2,
  3. 广告元素3
  4. {display:none !important;}
复制代码
例如:
  1. /* 新浪 */
  2. div[id^="ad_"],
  3. div[class*="adNone"],
  4. span[class="adNone"],
  5. div[class^="Ad_"],
  6. DIV[class*="blk_xlzt"],
  7. DIV[class*="zhitou"]
  8. {display:none !important}
复制代码
解释一下上面的符号,/*  */是注释内容,可以用于标题或者说明;
*,^为通配符,分别表示任意位置包含指定字符串的标识开头包含指定字符串的标识。
div[id^="ad_"]表示ID以“ad_”开头的div元素,div[class*="adNone"]表示class标识包含“adNone”字段的div元素。

使用“隐藏”声明来屏蔽广告有时候会造成空白区域,这时可使用以下属性设置来去除空白区域:
  1. 广告元素
  2. {height:inherit !important;}
复制代码
意思大致是设置指定元素高度为自适应。

下面是远景论坛的一些广告:

首页.JPG


页底.JPG


中间.JPG


子版块中间.JPG


帖子内.JPG


签名.JPG


下面给出最终版的过滤远景广告的CSS样式表:2014年6月9日更新
  1. /* 远景论坛bbs.pcbeta.com */
  2. /* 2014年6月9日更新 */
  3. div[id*="cproIframe"], /* 两侧悬浮 */
  4. div[class="focus"], /* 右下角焦点话题 */
  5. span[id="weixinqr"], /* 右上角微信二维码 */
  6. ul[class="forum_top"]+div, /* 首页头部 */
  7. div[class="bm a_c mtw"], /* 首页中部 */
  8. div[id*="BAIDU_DUP_wrapper_"], /* 首页底部 */
  9. div[id="pt"]+div[style]>div[style]+div[style], /* 帖子列表头部 */
  10. div[id="diynavtop"]+style+div, /* 帖子头部 */
  11. div[class="a_pt"], /* 帖子1楼头部 */
  12. div[class="a_pb"], /* 帖子1楼尾部 */
  13. div[id="ckepop"], /* 帖子分享到 */
  14. td[class="plc plm"] /* 签名 */
  15. {display:none !important;}
  16. div[id="wp"]>style+div /* 首页头部隐藏空白 */
  17. {height:inherit !important;}
复制代码


也可直接下载附件:
远景去广告CSS样式表_20140609.zip (529 Bytes, 下载次数: 747)

请认真研读该CSS规则,读懂上面的每一条后,基本上屏蔽所有网站的广告不成问题。

通过IE选项的辅助功能加载css样式表,重启浏览器生效:

2.JPG


下面介绍使用跟踪保护列表tpl来过滤广告:

TPL跟踪保护列表是网页加载前拦截,在这一点上比CSS优胜,缺点是会留下大量空白框。

下面网站可供自定义跟踪保护列表内容:

http://tpl.aregg.com/new

1. 点击新建TPL,规则格式为
  1. msFilterList
  2. : Expires=4
  3. #标题
  4. -d 域名 广告元素
复制代码
说明:msFilterList表示这是一个规则文件,Expires规则更新间隔,#表示该行是注释行,下面是具体的规则内容。

-d,前面的减号表示这是一个阻止的规则,d表示后面的内容里包括域名信息,-d就代表:阻止该域名(及其域名后面显示的子字符串)内容;可使用通配符*。

+d,代表允许该域名内容通过,若同一个域名分别出现在允许和阻止规则中,那么允许规则的优先级高于阻止。

“- 广告元素”表示全局拦截指定广告元素,而不是在某一特定网站。

跟踪保护列表通常用于拦截一些JS脚本文件,广告图片等。

例如:
  1. msFilterList
  2. : Expires=4
  3. #77电视
  4. -d media.8jkx.com /0/361.js.php
  5. -d media.8jkx.com /0/359.js.php
复制代码

2. 然后填写名称和密码后点击提交!

21414.JPG

3. 最后安装TPL:

安装TPL.JPG


4. 下面给出过滤远景广告的TPL:
  1. msFilterList
  2. : Expires=30
  3. #远景
  4. -d cpro.baidu.com
  5. -d cpro.baidustatic.com
复制代码

大家不要小看上面两条跟踪保护列表规则,它具有普遍适用性,能过滤掉百度广告联盟的大部分广告,如果你在广告的右下角看到有个百度的脚印小标志,那就是百度广告联盟的广告,上面两条跟踪保护列表规则就能干掉他。通常一些两侧悬浮广告也是百度广告联盟的广告,同样适用。

CSS样式表屏蔽广告和TPL跟踪保护列表过滤广告两种方式均能独立过滤掉远景的全部广告内容。

两者结合更好。单独使用也可。

下面是过滤后的效果:

后1.JPG


后2.JPG


后3.JPG


后4.JPG


这里提供一下大名鼎鼎的Easylistchina+Easylist跟踪保护列表,能够过滤掉绝大部分广告,结合上面的自定义规则,就能做到无一漏网之鱼了。
Easylistchina+Easylist.zip (461 Bytes, 下载次数: 801)
使用说明:用IE打开Easylistchina+Easylist.htm,点击Easylistchina+Easylist添加即可。
13

查看全部评分

Rank: 9

UID
3150022
帖子
2487
PB币
488
贡献
0
技术
264
活跃
2376
发表于 2013-12-18 19:52:52 |显示全部楼层
马上试试

Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17

UID
259359
帖子
30286
PB币
38211
贡献
0
技术
63
活跃
2976

7周年庆典勋章 8周年庆典勋章 水神勋章

发表于 2013-12-18 19:53:10 |显示全部楼层
把签名都过滤了,~

Rank: 1

UID
3871706
帖子
20
PB币
0
贡献
0
技术
0
活跃
22
发表于 2013-12-18 20:47:22 |显示全部楼层
看看~~~~~

Rank: 5Rank: 5Rank: 5

UID
356946
帖子
214
PB币
51
贡献
0
技术
1
活跃
818
发表于 2013-12-18 21:03:46 |显示全部楼层
看看~~~~~

Rank: 5Rank: 5Rank: 5

UID
276913
帖子
693
PB币
1560
贡献
0
技术
0
活跃
564
发表于 2013-12-18 21:31:09 |显示全部楼层
看看~~~~~

Rank: 7Rank: 7Rank: 7

UID
109936
帖子
1202
PB币
4887
贡献
0
技术
1
活跃
974

8周年庆典勋章

发表于 2013-12-18 21:34:15 |显示全部楼层
这个不错,谢谢分享

专家

Rank: 7Rank: 7Rank: 7

UID
681073
帖子
886
PB币
32
贡献
0
技术
199
活跃
250
发表于 2013-12-18 21:42:29 |显示全部楼层
这个不错,谢谢分享

Rank: 5Rank: 5Rank: 5

UID
2243154
帖子
689
PB币
84
贡献
0
技术
7
活跃
1227
发表于 2013-12-18 22:01:57 |显示全部楼层
谢谢分享                        

Rank: 7Rank: 7Rank: 7

UID
1589865
帖子
1117
PB币
8682
贡献
0
技术
30
活跃
1519

7周年庆典勋章 8周年庆典勋章

发表于 2013-12-18 22:07:52 |显示全部楼层

谢谢分享

Rank: 2Rank: 2

UID
3012461
帖子
166
PB币
43
贡献
0
技术
0
活跃
257
发表于 2013-12-18 22:10:22 |显示全部楼层
谢谢分享

Rank: 7Rank: 7Rank: 7

UID
872780
帖子
2262
PB币
6310
贡献
0
技术
12
活跃
1324
发表于 2013-12-18 22:11:47 |显示全部楼层
技术贴,要顶

Rank: 5Rank: 5Rank: 5

UID
589314
帖子
1102
PB币
329
贡献
0
技术
0
活跃
1238
发表于 2013-12-18 22:12:01 |显示全部楼层
谢谢楼主分享!

Rank: 7Rank: 7Rank: 7

UID
1425826
帖子
1132
PB币
225
贡献
0
技术
0
活跃
810

I'm Windows Phone用户

发表于 2013-12-18 22:20:39 |显示全部楼层
感谢楼主分享,顶贴支持~

Rank: 2Rank: 2

UID
3938538
帖子
315
PB币
0
贡献
0
技术
0
活跃
1865
发表于 2013-12-18 22:53:46 |显示全部楼层
馬上試試

Rank: 5Rank: 5Rank: 5

UID
1026197
帖子
439
PB币
928
贡献
0
技术
20
活跃
254
发表于 2013-12-18 23:00:07 |显示全部楼层
技术贴,敢屏蔽远景的,小心封杀

Rank: 5Rank: 5Rank: 5

UID
1616169
帖子
534
PB币
1305
贡献
0
技术
71
活跃
368
发表于 2013-12-18 23:00:46 |显示全部楼层
感谢楼主分享,顶贴支持~

超级霸天虎

Rank: 11Rank: 11Rank: 11

UID
70431
帖子
5688
PB币
2154
贡献
0
技术
0
活跃
1780
发表于 2013-12-18 23:21:06 |显示全部楼层
支持LZ的辛勤劳动!

Rank: 5Rank: 5Rank: 5

UID
2942500
帖子
494
PB币
731
贡献
0
技术
0
活跃
1269

I'm Windows Phone用户

发表于 2013-12-18 23:32:33 |显示全部楼层
多谢分享~~~~~~~~~~~

Rank: 7Rank: 7Rank: 7

UID
2943165
帖子
1262
PB币
1309
贡献
0
技术
1
活跃
542

8周年庆典勋章

发表于 2013-12-19 07:40:14 |显示全部楼层
樓主太強了
第一次看到這種教學帖
回顶部
Copyright (C) 2005-2019 pcbeta.com, All rights reserved
Powered by Discuz!  苏ICP备17027154号
请勿发布违反中华人民共和国法律法规的言论,会员观点不代表远景论坛官方立场。
远景在线 | 远景论坛 | 苹果论坛 | Win10论坛 | Win8论坛 | Win7论坛 | WP论坛 | Office论坛 | 电脑硬件 | 安卓软件