WebView 使用Android 原生ToolBar

最新推荐文章于 2024-08-29 17:08:36 发布

Rlusia

最新推荐文章于 2024-08-29 17:08:36 发布

阅读量1.5k

点赞数

分类专栏： Android个人学习笔记文章标签： Android WebView ToolBar 标题栏 H5

本文链接：https://blog.csdn.net/black_dreamer/article/details/80598513

版权

本文介绍了如何在WebView中使用Android原生ToolBar，解决隐藏H5标题栏并显示H5内容标题的问题。通过在onPageFinished方法中插入JS代码隐藏H5的标题栏，并利用js回调Java方法获取H5标题，设置到原生ToolBar上。

摘要由CSDN通过智能技术生成

WebView 使用Android 原生ToolBar

前言

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

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

为避免出现两个标题栏，需要隐藏H5自带的标题栏；
原生标题栏需要显示 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('fed-navbar')[0];"
                        + "divNav.style.display = 'none';"
                        + "}