屏蔽网络运营商植入广告jQuery代码

目前我网站没有挂任何广告，然而在移动端浏览时却发现时不时的在页脚出现一个悬浮广告，一开始就知道是网络运营商劫持植入的广告，但没理会。

昨晚闲来无事搜索了一下，发现有同样问题的用户还不少。

一般情况下，广告都是通过<iframe>或<script>嵌入的，下面这段代码可以移除这类广告：

$(document).ready(function(){
	bzg_filter_ad('iframe', 'src');
	bzg_filter_ad('script', 'src');
});
function bzg_filter_ad(elem, attribute) {
	var domain = window.location.hostname;

	//域名白名单
	var white_list = new Array(domain, 'zz.bdstatic.com', 'push.zhanzhang.baidu.com', 'hm.baidu.com', 'bdimg.share.baidu.com');
	
	$(elem).each(function(){
		var a = document.createElement('a'); 
		a.href = $(this).attr(attribute);
		if( $.inArray(a.hostname, white_list) == -1 ) {
			$(this).remove();
		}
	});
}

注意白名单功能，可以使白名单中的<iframe>和<script>不会被移除，只需添加外网的域名，本站域名已经通过window.location.hostname获取了，这里我添加了百度统计、百度分享、百度自动推送的域名。

然而我遇到的情况是，移除<iframe>和<script>后仍然会显示一张图片广告，因为它在div元素上加了背景图。

因此，更简单高效的代码产生了：

$(document).ready(function(){
	$('#colophon').nextAll().remove();
});

需要确定你网页</body>前的最后一个元素是什么，例如本站每个页面的最后一个元素都是footer#colophon，如果你实在不确定，可以在页脚模板的</body>前加一个空元素：

<div id="killAd"></div>

同时将jQuery代码中的#colophon修改为#killAd

$(document).ready(function(){
	$('#killAd').nextAll().remove();
});

考虑到网络运营商的广告都是在页面加载完成以后才植入的，所以，直接把上面的代码放进去是不行的，要加个定时执行：

setTimeout(function(){
	$('#killAd').nextAll().remove();
}, 3000);

这样，程序会在3秒后执行广告删除，但是用户仍然会看到几秒的广告，而且我们也不确定广告是多久后植入，所以我现在使用的代码是：

setInterval(function(){
	$('#killAd').nextAll().remove();
}, 500);

每500毫秒执行一次，到目前为止我再也没有看到网络运营商的广告出现了。

可能你会担心setInterval重复执行会不会太耗资源，于是我特别在我网站测试了一下，执行广告删除大概需要2.3毫秒的时间，注意是毫秒（1秒等于1000毫秒），而执行删除广告任务的程序是500毫秒执行一次，所以不会有任何问题。

最后，网站使用HTTPS安全协议才是王道，现在有不少服务商提供免费SSL证书了，只是我用的虚拟主机不支持SSL，所以只有用jQuery解决。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。