前言

查豆瓣 使用的是 WebView 加载页面，在豆瓣的移动页面中存在两到三个的广告轮播图，比较影响阅读体验。所以开始着手看看怎么屏蔽掉广告。

在 WebView 中有以下三个方法可以考虑：

fun onPageFinished(view: WebView, url: String)

fun shouldInterceptRequest(view: WebView, request: WebResourceRequest): WebResourceResponse?

fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean

复制代码onPageFinished方法会在页面加载完毕后回调

shouldInterceptRequest方法会通知 host Application，也就是启动 WebView 的应用返回WebResourceResponse。如果本地应用返回null，则webView会正常加载资源

shouldOverrideUrlLoading会在Url被加载前被回调。实现此方法，返回true时WebView将不会加载该Url，否则将会正常加载Url

此方法仅在主动或被动调用WebView.load(url)方法时才会回调，而页面中的资源加载时是不会被回调的

比如主动显式调用：webview.load(url)

被动则是页面中点击链接之后加载

此方法不适用于POST请求

基于上述三个方法，我们看看能否做到：

禁止加载广告域名

给广告域名请求返回空的数据

在页面加载完毕后消除广告占位的div或类似元素

1. 禁止加载广告域名

根据shouldOverrideUrlLoading()方法的特性，我们几乎无法用之来屏蔽页面中加载的广告。

在实践中，一般在这处理网页对本地资源的调用，比如最常见的拉起 APP 的操作。

override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {

val url = request.url.toString()

if (url.startsWith("douban:")) {

// 拉起豆瓣 APP

handleAppRequest(view, url)

return true

}

return super.shouldOverrideUrlLoading(view, request)

}

复制代码

此方法看起来应该是不行了。这一步也应该没法轻易办到。

2. 给广告域名请求返回空的数据

我们把目光聚集到了shouldInterceptRequest()方法，实际上这个方法的功劳最大。我们很轻易就是实现了广告拦截。

override fun shouldInterceptRequest(view: WebView, request: WebResourceRequest): WebResourceResponse? {

return if (isAdDomain(request.url.toString())) {

createEmptyResource()

} else super.shouldInterceptRequest(view, request)

}

fun createEmptyResource(): WebResourceResponse {

return WebResourceResponse("text/plain", "utf-8", ByteArrayInputStream("".toByteArray()))

}

fun isAdDomain(url: String): Boolean {

return (!url.contains("douban")) or url.contains("baidu")

}

复制代码

前面提起的，此方法会在请求数据前回调。所以我们可以自己构建WebResourceResponse对象返回。

豆瓣的移动端对接的是百度的推广，所以基本上广告域名都带有baidu的关键字。所以我这样就已经足够了。

更一般的情况，我们可以自己维护规则列表或者，使用一些公开的规则列表。或者自己收集一下常见的大的推广联盟的链接就可以了。

3. 消除空白广告元素

我们给广告请求返回了空数据，但是原有的广告占位元素依然存在。所以我们要用到

onPageFinished()方法，来删除广告占位标签。

override fun onPageFinished(view: WebView, url: String) {

webView.evaluateJavascript(

"javascript:(" +

" function() {" +

" var len = document.getElementsByClassName('Advertisement').length; " +

" for(var i = 0; i < len; i ++){" +

" document.getElementsByClassName('Advertisement')[i].style.display = 'none'" +

" }" +

" }" +

")()"

) {

print(it)

}

}

复制代码

这里利用了WebView.evaluateJavascript()方法，执行了一段 JavaScript 代码：

javascript:(

function(){

var len = document.getElementsByClassName('Advertisement').length;

for(var i = 0; i < len; i ++ ){

document.getElementsByClassName('Advertisement')[i].style.display = 'none'

}

}

)()

复制代码

这里的代码需要你根据不同的页面来维护规则。比如豆瓣的移动端广告都用Advertisement作为类名。

所以获取了个数之后，降之隐藏。

结语

至此，我们简单地实现了对豆瓣移动端网页的拦截。

参考链接：