Android-webview加载网页去除标题

问题描述:

在进行app开发时,我们会经常遇到webview加载一个网址的情况,但是仅仅是webview.loadUrl()并不能满足我们的需求,因为一般网页上面都有一个标题,,标题的颜色和我们的app风格可能整体都不太搭,这个时候该怎么办?除了让web端的朋友们专门写一个的情况下,还有另外一个方法，就是利用js或者jquery处理，原理都是一样，这里只讲一下js。

先看一下效果图:

这是web端网页的加载页面：

这是webview.loadUrl()的数据加载后的页面：

这是项目要求的去掉标题的页面：

解决思路:

利用js交互,将webview加载的URL的页面html做一些修改,例如将显示标题的一部分置空.关键点在于找到html中展示标题的节点

那么我们的解决步骤就是:

1.将webview加载的URL在浏览器上打来,鼠标右键单击,查看页面源代码,可以看到页面的布局信息,可以确定我们要删除的标题的代码所在的位置

2.自己定义WebViewClient,去取代系统对webview加载页面的处理,重写WebViewClient的

2.onPageFinished()中编辑javascript函数将显示标题的部分置空或者删除,并调用onPageFinished()方法

3.onPageFinished()中显示被JavaScript处理过的网页数据

查看页面源码，找出要移除的代码段：

WebView处理：

WebView webView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);

        webView.loadUrl("http://www.lymidas.com/Home/DataCenter?currentId=1");

        webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);


                //编写 javaScript方法
                String javascript =  "javascript:function hideOther() {" +
                        "document.getElementsByTagName('body')[0].innerHTML;" +
                        "document.getElementsByTagName('div')[0].style.display='none';" +
                        "document.getElementsByTagName('div')[3].style.display='none';" +
                        "document.getElementsByClassName('dropdown')[0].style.display='none';" +
                        "document.getElementsByClassName('min')[0].remove();" +
                        "var divs = document.getElementsByTagName('div');" +
                        "var lastDiv = divs[divs.length-1];" +
                        "lastDiv.remove();" +
                        "document.getElementsByClassName('showme')[0].remove();" +
                        "document.getElementsByClassName('nei-t3')[1].remove();}";

                //创建方法
                view.loadUrl(javascript);

                //加载方法
                view.loadUrl("javascript:hideOther();");
            }
        });
           

总结：

   这里要注意几个地方：

       第一点：

       上面javaScript方法中：

        getElementByTagName("xxx")是通过标签的名称获取

        getElementByClassName("xxx")是获取标签上定义的class名称获取

       第二点：

       有的时候，网页上查看页面源代码看到的html内容 和 手机上处理页面内容不太一样，区别就在于网页上带有  Class的标签，在手机上加载时，Class标签就不见了，造成的后果是明明使用getElementByClassName（“”XXX“”）.remove()处理过了，但是没有起作用。这个时候的解决方法是使用getElementByTagName("xxx")是通过标签的名称获取，然后remove().

        查看webview上加载网页的页面源码是看这篇博客http://blog.csdn.net/qq_32452623/article/details/52182964

        关于，为什么出现这种情况的原因还不知道，如果有朋友知道，请告诉我一下，先谢谢了。

        PS:

        可能的原因(1):

手机加载的网页和你在pc加载的网页地址不一样，当你用手机加载的时候，会自动重定向到m.xx.com这样的站点（m指mobile加载的，网页加载时一般是www.xx.com）。(这里要谢谢无缘公子的评论告知)

         第三点：

         这种去标题的方式有个小不美的地方,因为本质是加载两次Url,一次是原本的Url,一次是处理过的URL  ,所以刚进入页面加载的是带标题的,过了一段时间是闪烁一下,加载显示的是操作后的Url.

         关于这个闪烁的处理,我想了两种方式:

         1.将webview先隐藏,加载完成后再显示.

         2.考虑在onPageStarted()方法中显示了等待框缓冲一下.

         但是都有个问题,如果判断第二次加载URL结束,直接在onPagefinished()中view.loadurl()语句后面是不可行的,因为里面是开了线程 异步执行的.这个问题暂时还是没有解决.

      最后 附上我写这篇博客的时候测试的小Demo,传送地址http://download.csdn.net/detail/qq_32452623/9612074