Android-webview加载网页去除标题

痛定思痛。 2022-09-25 06:27 258阅读 0赞

# 问题描述: #

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

先看一下效果图:

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

![Center][]

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

![Center 1][]

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

![Center 2][]

# 解决思路: #

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

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

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

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

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

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

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

![Center 3][]

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名称获取

![Center 4][]

**第二点：**

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

查看webview上加载网页的页面源码是看这篇博客[http://blog.csdn.net/qq\_32452623/article/details/52182964][http_blog.csdn.net_qq_32452623_article_details_52182964]

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

**PS:**

可能的原因(1):

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

**第三点：**

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

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

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

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

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

最后 附上我写这篇博客的时候测试的小Demo,传送地址[http://download.csdn.net/detail/qq\_32452623/9612074][http_download.csdn.net_detail_qq_32452623_9612074]

[Center]: /images/20220718/90f617c6d6ec4df4bfd0752b74b07d44.png
[Center 1]: /images/20220718/f3baa96233f64aa79db54b9b325fc675.png
[Center 2]: /images/20220718/efb5c7ae2d7f4ea988857a0631fb9402.png
[Center 3]: /images/20220718/eb751626e5bb4d31b4ad12109ecff1c8.png
[Center 4]: /images/20220718/d2d47f3b3cc34d95860f98ef76a02d3f.png
[http_blog.csdn.net_qq_32452623_article_details_52182964]: http://blog.csdn.net/qq_32452623/article/details/52182964
[Link 1]: http://blog.csdn.net/zuiwuyuan
[http_download.csdn.net_detail_qq_32452623_9612074]: http://download.csdn.net/detail/qq_32452623/9612074