JavaScript注入Webview，去掉头部广告或者引导下载banner

前言：Webview不仅可以加载网页，而且还支持加载的时候网页的任何元素都是可以修改的：隐藏、替换、插入新的html元素等等。总之，Webview的神奇给了我们很多发挥创意的可能：比如修改某些网页的标题，去掉头部广告或者引导下载banner。

我们可以使用JavaScript注入Webiew的方式来去掉这些烦人的引导下载banner，几乎是模板代码，不管你是否精通js，你都能轻松地以瓢画葫来实现你想要的效果。
 

一、JavaScript注入去掉引导下载banner

举个栗子：如网易考拉商品详情页

1、要去掉这个banner ，需要查找对应的class或者id

直接用google浏览器F12点到那待消除位置鼠标右键，选择审查元素就可以定位到

重要提醒：有些网站电脑端和手机端网页代码不一样，需要在点击Google浏览器右上角的Toggle Device按钮，并刷新一下网页，这样就切换成手机浏览模式方能找到想要去除元素的class、id或Tag。

2、根据这个class 我们就可以通过js注入的方式去掉这个banner

    private void hidenBanner(WebView view)
   {  
        //隐藏元素
        String javascript = "javascript:function hideBanner() {" +
                "var banners = document.getElementsByClassName('m-downloadbanner');" +
                "var firstbanner = banners[0];" +
                "firstbanner.remove();" + "}";

        view.loadUrl(javascript);//创建方法
        view.loadUrl("javascript:hideBanner();");//加载方法
    }

代码解释：

①当浏览器载入 HTML 文档, 它就会成为 Document 对象，document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。所有主要浏览器都支持 Document 对象。

②获取所有指定类名的元素：var x = document.getElementsByClassName("example");

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表，NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示：我们可以使用NodeList 对象的length属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

③javascript的两个方法是我们自己写的函数

   mWebView.loadUrl("javascript:modifyText();");
   mWebView.loadUrl("javascript:hideOther();");

第一个修改文本，可以注入任意html代码

第二个可以隐藏部分div元素

3、最后，直接放在onLoadResource()和onProgressChanged()中调用就好了。

   webView.setWebViewClient(new WebViewClient()
   {
            @Override
            public void onLoadResource(WebView webView, String s) 
            {
                super.onLoadResource(webView, s);
                hidenBanner(webView);
            }
  });

  webView.setWebChromeClient(new WebChromeClient() 
  {
            @Override
            public void onProgressChanged(WebView view, int newProgress) 
            {

                if (newProgress == 100) 
                {
                    progressBar.setVisibility(View.GONE);//加载完网页进度条消失
                }
                else 
               {
                    //更新进度
                    progressBar.setVisibility(View.VISIBLE);
                    progressBar.setProgress(newProgress);
                    hidenBanner(webView);
                }
           }

   });

注意：该方法不要在onPageFinished() 中调用。这样会导致banner先显示出来，然后才被隐藏。体验不好。

调用后，就没有了：

二、注入js隐藏部分div元素和修改网页标题，多个操作用多个js去做才能生效

举个栗子：如下网页，我放到了自己的app里，但是又不希望出现该网页的标题。

/**
 * 注入js隐藏部分div元素，多个操作用多个js去做才能生效
 */
private void hideHtmlContent() 
{
    //修改文本，可以注入任意的html代码，我是直接注入一段带样式的文本节点，表现良好
    String javascriptq =  "javascript:function modifyText() {" +
            "var headers = document.getElementsByClassName('logo');" +
            "var lastHeader = headers[headers.length-1];" +
            "lastHeader.innerHTML='<font style=\"float:left;margin-left:5px;font-size:.42rem;margin-top:3px;\">极光影院</font>';" +
            "}";

     //隐藏元素       
    String javascript =  "javascript:function hideOther() {" +
            "var headers = document.getElementsByClassName('logo');" +
            "var lastHeader = headers[headers.length-1];" +
            "lastHeader.remove();" +
            "}";

    //创建方法
    mWebView.loadUrl(javascriptq);
    mWebView.loadUrl(javascript);

    //加载方法
    mWebView.loadUrl("javascript:modifyText();");
    mWebView.loadUrl("javascript:hideOther();");
 
｝

最后重写webviewClient()中的onLoadResource()方法和webviewChromeClient()里的onProgressChanged()方法，在里面直接调用上述的hideHtmlContent()方法即可。

参考链接：安卓webview注入js修改网页文本或添加其他元素