Android WebView屏蔽网页中广告

需求

WebView加载的某些网页里面常常有广告，需要把广告去除，可以利用js把对应的广告块进行隐藏。这里效果就是只展示列表内容。

效果

• 原始效果
  
• 屏蔽后效果
  

代码

• 核心JS代码

document.querySelector('#siteWrapper > header').style.display="none";

• WebView 设置
  隐藏代码写在WebView 的setWebViewClient方法下面onProgressChanged 里面

WebViewClient client=new WebViewClient(){
    
    
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    
    
            view.loadUrl(request.getUrl().toString());
            return true;
        }

        @Override
        public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
    
    
            handler.proceed();
        }

        @Override
        public void onPageFinished(WebView view, String url) {
    
    
            String fun="javascript:" +
                    "function hideStyle(){" +
                    "document.querySelector('#siteWrapper > header').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > div.wrapper > section.boxItem.boxItemAdd').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > div.wrapper > section.boxItem.toggleBox.pairsWrapper > div').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > footer > div.footerBottom').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > footer > div:nth-child(4)').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > footer > div:nth-child(3)').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > footer > div:nth-child(2)').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > footer > div:nth-child(1)').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > section.boxItem.disclaimer.js-toggled-box.js-disclaimer-box').style.display=\"none\";" +
                    "document.querySelector('#div-gpt-ad-1333374405327-0').style.display=\"none\";" +
                    "document.querySelector('#div-gpt-ad-1338276709958-0').style.display=\"none\";" +
                    "document.querySelector('#siteWrapper > div.adDrawer').style.display=\"none\";" +
                    "}" +
                    "hideStyle();";
            view.loadUrl(fun);

        }
    };

步骤

在浏览器中打开网页链接地址，按 F12 查看网页源代码，在div 上选择复制selector

好了，over