WebView

1、简介

从 Android 4.4 开始，Android 中的 WebView 不再是基于 WebKit 的，而是开始基于 Chromium，这个改变使得 WebView 的性能大幅提升，并且对 HTML5、CSS、JavaScript 有了更好的支持！

2、作用

显示和渲染 Web 页面

直接使用 html 文件（网络上或本地 assets 中）作布局

可和 JavaScript 交互调用（简称 js）

3、使用介绍

一般来说 Webview 可单独使用，可联合其子类一起使用，所以接下来，我会介绍：

Webview 自身的常见方法；

Webview 的最常用的子类：
WebSettings 类、WebViewClient 类、WebChromeClient 类

Android 和 Js 的交互

一、Webview 常用方法

• 1、WebView 的状态

// 激活 WebView 为活跃状态，能正常执行网页的响应
webView.onResume()；
// 当页面失去焦点被切换到后台不可见状态，需要执行 onPause
// 通过 onPause 动作通知内核暂停所有的动作，比如 DOM 的解析、plugin 的执行、JavaScript 执行。
webView.onPause()；
// 当应用程序（存在 webview）被切换到后台时，这个方法不仅仅针对当前的 webview 而是全局的全应用程序的 webview
// 它会暂停所有 webview 的 layout、parsing、javascripttimer，降低 CPU 功耗。
webView.pauseTimers()
// 恢复 pauseTimers 状态
webView.resumeTimers()；
// 销毁 Webview
// 在关闭了 Activity 时，如果 Webview 的音乐或视频还在播放，就必须销毁 Webview
// 但是注意：webview 调用 destory 时，webview 仍绑定在 Activity 上
// 这是由于自定义 webview 构建时传入了该 Activity 的 context 对象
// 因此需要先从父容器中移除 webview，然后再销毁 webview
rootLayout.removeView(webView); 
webView.destroy();

• 2、关于前进 / 后退网页

// 是否可以后退
Webview.canGoBack() 
// 后退网页
Webview.goBack()
// 是否可以前进                     
Webview.canGoForward()
// 前进网页
Webview.goForward()
// 以当前的 index 为起始点前进或者后退到历史记录中指定的 steps
// 如果 steps 为负数则为后退，正数则为前进
Webview.goBackOrForward(intsteps)

常见用法：Back 键控制网页后退
问题：在不做任何处理前提下 ，浏览网页时点击系统的“Back”键，整个 Browser 会调用 finish() 而结束自身
目标：点击返回后，是网页回退而不是退出浏览器
解决方案：在当前 Activity 中处理并消费掉该 Back 事件

public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) { 
        mWebView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

• 3、清除缓存数据

// 清除网页访问留下的缓存
// 由于内核缓存是全局的因此这个方法不仅仅针对 webview 而是针对整个应用程序
Webview.clearCache(true);
// 清除当前 webview 访问的历史记录
// 只会清除 webview 访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；
// 这个 api 仅仅清除自动完成填充的表单数据，并不会清除 WebView 存储到本地的数据
Webview.clearFormData()；

二、常用类

• 1、WebSettings 类
  作用：对 WebView 进行配置和管理
  配置步骤 & 常见方法：
  配置步骤 1：添加访问网络权限（AndroidManifest.xml）

<uses-permission android:name="android.permission.INTERNET"/>

配置步骤 2：生成一个 WebView 组件（有两种方式）

// 方式 1：直接在 Activity 中生成
WebView webView = new WebView(this)
// 方法 2：在 Activity 的 layout 文件里添加 webview 控件
WebView webview = (WebView) findViewById(R.id.webView1);

配置步骤 3：进行配置，利用 WebSettings 子类（常见方法）

// 声明 WebSettings 子类
WebSettings webSettings = webView.getSettings();
// 如果访问的页面中要与 Javascript 交互，则 webview 必须设置支持 Javascript
webSettings.setJavaScriptEnabled(true);  
// 支持插件
webSettings.setPluginsEnabled(true); 
// 设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true); // 将图片调整到适合 webview 的大小 
webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
// 缩放操作
webSettings.setSupportZoom(true); // 支持缩放，默认为 true，是下面那个的前提。
webSettings.setBuiltInZoomControls(true); // 设置内置的缩放控件。若为 false，则该 WebView 不可缩放
webSettings.setDisplayZoomControls(false); // 隐藏原生的缩放控件
// 其他细节操作
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // LOAD_NO_CACHE：不使用缓存，只从网络获取数据
webSettings.setAllowFileAccess(true); // 设置可以访问文件 
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 支持通过 JS 打开新窗口 
webSettings.setLoadsImagesAutomatically(true); // 支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8"); // 设置编码格式
// 设置 媒体播放需要用户手势为 false
// 系统默认设置为 true，需要用户点击按钮后才能播放音频，这样会导致 webview 加载完成后自动播放音频的
// 需求实现不了，因为需要用户点击之后才能播放
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    settings.setMediaPlaybackRequiresUserGesture(false);
}

常见用法：设置 WebView 缓存
当加载 html 页面时，WebView 会在 /data/data/ 包名目录下生成 database 与 cache 两个文件夹
请求的 URL 记录保存在 WebViewCache.db，而 URL 的内容是保存在 WebViewCache 文件夹下
是否启用缓存：

// 优先使用缓存: 
WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
// 缓存模式如下：
// LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
// LOAD_DEFAULT:（默认）根据 cache-control 决定是否从网络上取数据
// LOAD_NO_CACHE: 不使用缓存，只从网络获取数据
// LOAD_CACHE_ELSE_NETWORK: 只要本地有，无论是否过期，或者 no-cache，都使用缓存中的数据
// 不使用缓存: 
WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

结合使用（离线加载）

if (NetStatusUtil.isConnected(getApplicationContext())) {
    // 根据 cache-control 决定是否从网络上取数据
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
} else {
    // 没网，则从本地获取，即离线加载
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}
webSettings.setDomStorageEnabled(true); // 开启 DOM storage API 功能
webSettings.setDatabaseEnabled(true); // 开启 database storage API 功能
webSettings.setAppCacheEnabled(true); // 开启 Application Caches 功能
String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
webSettings.setAppCachePath(cacheDirPath); // 设置  Application Caches 缓存目录

注意：每个 Application 只调用一次 WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()

• 2、WebViewClient 类
  作用：处理各种通知 & 请求事件
  常见方法：
  常见方法 1：shouldOverrideUrlLoading()
  作用：打开网页时不调用系统浏览器， 而是在本 WebView 中显示；在网页上的所有加载都经过这个方法，这个函数我们可以做很多操作。

// 步骤 1: 定义 Webview 组件
Webview webview = (WebView) findViewById(R.id.webView1);
// 步骤 2: 选择加载方式
// 方式 1: 加载一个网页
webView.loadUrl("http://www.google.com/");
// 方式 2: 加载 apk 包中的 html 页面
webView.loadUrl("file:///android_asset/test.html");
// 方式 3: 加载手机本地的 html 页面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");
// 步骤 3: 复写 shouldOverrideUrlLoading() 方法，使得打开网页时不调用系统浏览器，而是在本 WebView 中显示
webView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});

常见方法 2：onPageStarted()
作用：开始载入页面调用的，我们可以设定一个 loading 的页面，告诉用户程序在等待网络响应。

webView.setWebViewClient(new WebViewClient(){
    @Override
    public void  onPageStarted(WebView view, String url, Bitmap favicon) {
        // 设定加载开始的操作
    }
});

常见方法3：onPageFinished()
作用：在页面加载结束时调用，我们可以关闭 loading 条，切换程序动作。

webView.setWebViewClient(new WebViewClient(){
    @Override
    public void onPageFinished(WebView view, String url) {
        // 设定加载结束的操作
        //（不靠谱）–> WebChromeClient.onProgressChanged（靠谱）
    }
});

常见方法 4：onLoadResource()
作用：在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。

webView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean onLoadResource(WebView view, String url) {
        // 设定加载资源的操作
    }
});

常见方法 5：onReceivedError()
作用：加载页面的服务器出现错误时（如 404）调用。
App 里面使用 webview 控件的时候遇到了诸如 404 这类的错误的时候，若也显示浏览器里面的那种错误提示页面就显得很丑陋了，那么这个时候我们的 app就需要加载一个本地的错误提示页面，即 webview 如何加载一个本地的页面

// 步骤 1：写一个 html 文件（error_handle.html），用于出错时展示给用户看的提示页面
// 步骤 2：将该 html 文件放置到代码根目录的 assets 文件夹下
// 步骤 3：复写 WebViewClient 的 onRecievedError 方法
// 该方法传回了错误码，根据错误类型可以进行不同的错误分类处理
webView.setWebViewClient(new WebViewClient(){
    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){
        switch(errorCode) {
            case HttpStatus.SC_NOT_FOUND:
                view.loadUrl("file:///android_assets/error_handle.html");
                break;
        }
    }
});

常见方法 6：onReceivedSslError()
作用：处理 https 请求，webView 默认是不处理 https 请求的，页面显示空白，需要进行如下设置：

webView.setWebViewClient(new WebViewClient() {    
    @Override    
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {    
        handler.proceed(); // 表示等待证书响应
        // handler.cancel(); // 表示挂起连接，为默认方式
        // handler.handleMessage(null); // 可做其他处理
    }    
});   

• 3、WebChromeClient 类
  作用：辅助 WebView 处理 Javascript 的对话框、网站图标、网站标题等等。
  常见使用：
  常见方法 1：onProgressChanged()
  作用：获得网页的加载进度并显示

webview.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress < 100) {
            String progress = newProgress + "%";
            progress.setText(progress);
          } else {

          }
    }
});

常见方法2：onReceivedTitle()
作用：获取 Web 页中的标题

webview.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onReceivedTitle(WebView view, String title) {
       titleview.setText(title)；
    }
}

• 4、解决用户在 webview 界面长按后出现复制提示的情况

mWebview.setLongClickable(true);
mWebview.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View v) {
        return true;
    }
});

避坑！！webview 如何加载 pdf ？
满满的 WebView 优化干货，让你的H5实现秒开
WebView 是如何拉起软键盘的？