WebView 使用Android 原生ToolBar

WebView 使用Android 原生ToolBar

前言

在使用 WebView 加载 H5 页面的时候，很多H5页面会有自己的标题栏，然而原生APP中也会有自己的标题栏。很多应用为保证标题栏风格与原生应用统一，或者保证返回键的使用能自由控制，选择使用原生的 ToolBar 来作为页面的标题栏。

使用原生标题栏要解决的问题

1. 为避免出现两个标题栏，需要隐藏H5自带的标题栏；
2. 原生标题栏需要显示 H5 标题栏中的标题

1. 隐藏H5标题栏

以一个网页为例：

http://m.ly.com/interCarTouch/view/main.html?from=groupmessage#/pickupSearch?refid=500270222

通过分析这个网页的源码，我们可以看到网页的标题栏是一个 class 名为 fed-navbar 的div，内部包含一个返回箭头和一个 h1 标题”用车“。我们要做的，就是找到这个div，并且隐藏。

如上图，在Chrome浏览器中，我们，可以通过 document.getElementsByClassName(“fed-navbar”)[0] 方法来拿到class名为 fed-navbar 的元素，并且通过设置其 style.display=”none” 来隐藏该元素。

document.getElementsByClassName("fed-navbar")[0].style.display="none"

在Android中，无法直接调试H5，但是可以在 WebViewClient 的onPageFinished方法中，插入刚才的 js 代码，来实现同样的功能：

private class MyWebViewClient extends WebViewClient {
    //......
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        //定义hideTitle方法，隐藏H5标题栏
        String javascript =
                "javascript:function hideTitle() {"
                        + "var divNav = document.getElementsByClassName('f