Android WebView 全面解析

一、简介

为了方便开发者实现在app内展示网页并与网页交互的需求，Android SDK提供了WebView组件。它继承自AbsoluteLayout，展示网页的同时，也可以在其中放入其他的子View。现如今，Hybrid应用似乎占据的APP的主流类型，那么关于WebView的使用就变得越发的重要。从Android 4.4（KitKat）开始，原本基于WebKit的WebView开始基于Chromium内核，这一改动大大提升了WebView组件的性能以及对HTML5,CSS3,JavaScript的支持。

二、相关类及API

1、WebView

基本：

• String getUrl()：获取当前页面的URL。
• String getTitle()：获取当前页面的标题。
• Bitmap getFavicon()：获取当前页面的favicon
• int getProgress()：获取当前页面的加载进度
• setInitialScale(int scaleInPercent)：设置初始缩放比例

加载网页：

• loadUrl(String url)：加载URL指定的网页
• loadUrl(String url, Map additionalHttpHeaders)：携带http headers加载URL指定的网页
• postUrl(String url, byte[] postData)：使用POST请求加载指定的网页
• reload()：重新reload当前的URL，即刷新。
• loadData(String data, String mimeType, String encoding)：加载内容
• loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)：使用baseUrl加载内容

导航：

• boolean canGoBack()：用来确认WebView里是否还有可回退的历史记录。通常我们会在WebView里重写返回键的点击事件，通过该方法判断WebView里是否还有历史记录，若有则返回上一页。
• boolean canGoForward()：用来确认WebView是否还有可向前的历史记录。
• boolean canGoBackOrForward(int steps)：以当前的页面为起始点，用来确认WebView的历史记录是否足以后退或前进给定的步数，正数为前进，负数为后退。
• goBack()：在WebView历史记录后退到上一项。
• goForward()：在WebView历史记录里前进到下一项。
• goBackOrForward(int steps)：以当前页面为起始点，前进或后退历史记录中指定的步数，正数为前进，负数为后退。
• WebBackForwardList copyBackForwardList()：复制一份BackForwardList
• clearHistory()：清除当前webview访问的历史记录。

JavaScript：

• addJavascriptInterface(Object object, String name)：注入Javascript对象
• removeJavascriptInterface(String name)：移除已注入的Javascript对象，下次加载或刷新页面时生效
• evaluateJavascript(String script, ValueCallback resultCallback)：对传入的JS表达式求值，通过resultCallback返回结果。此函数添加于API19，必须在UI线程中调用，回调也将在UI线程

其他：

• findAllAsync (String find)：异步执行查找网页内包含的字符串并设置高亮，查找结果会回调
• findNext (boolean forward)： 查找下一个匹配的字符串
• setFindListener(FindListener listener)：设置网页查找结果回调
• clearMatches()：清除网页查找的高亮匹配字符串
• saveWebArchive(String filename)：保存网页(.html)到指定文件
• saveWebArchive(String basename, boolean autoname, ValueCallback callback)：保存网页(.html)到文件
• pageUp(boolean top)：将WebView展示的页面滑动至顶部。
• pageDown(boolean bottom)：将WebView展示的页面滑动至底部。
• zoomBy(float factor)：缩放
• zoomIn()：放大
• zoomOut()：缩放
• clearCache(boolean includeDiskFiles)：清空网页访问留下的缓存数据。需要注意的时，由于缓存是全局的，所以只要是WebView用到的缓存都会被清空，即便其他地方也会使用到。该方法接受一个参数，从命名即可看出作用。若设为false，则只清空内存里的资源缓存，而不清空磁盘里的。
• clearFormData()：清除自动完成填充的表单数据。需要注意的是，该方法仅仅清除当前表单域自动完成填充的表单数据，并不会清除WebView存储到本地的数据。
• clearSslPreferences()：清除SSL偏好
• onPause()：当页面被失去焦点被切换到后台不可见状态，需要执行onPause操作，该操作会通知内核安全地暂停所有动作，比如动画的执行或定位的获取等。需要注意的是该方法并不会暂停JavaScript的执行，若要暂停JavaScript的执行请使用接下来的这个方法。
• onResume()：在先前调用onPause()后，我们可以调用该方法来恢复WebView的运行。
• pauseTimers()：该方法面向全局整个应用程序的webview，它会暂停所有webview的layout，parsing，JavaScript Timer。当程序进入后台时，该方法的调用可以降低CPU功耗。
• resumeTimers()：恢复pauseTimers时的所有操作。
• destroy()：销毁WebView。需要注意的是：这个方法的调用应在WebView从父容器中被remove掉之后。我们可以手动地调用
• getContentHeight()：该方法返回整个HTML页面的高度，但该高度值并不等同于当前整个页面的高度，因为WebView有缩放功能， 所以当前整个页面的高度实际上应该是原始HTML的高度再乘上缩放比例

2、WebSettings

• setDomStorageEnabled(boolean flag)：启用HTML5 DOM storage API，默认值 false
• setDatabaseEnabled(boolean flag)：启用Web SQL Database API，这个设置会影响同一进程内的所有WebView，默认值 false，此API已不推荐使用
• setAppCacheEnabled(boolean flag)：启用Application Caches API，必需设置有效的缓存路径才能生效，默认值 false，此API已废弃
• setAppCachePath(String appCachePath)：设值缓存路径
• setGeolocationEnabled(boolean flag)：启用定位
• setSaveFormData(boolean save)：是否保存表单数据
• setNeedInitialFocus(boolean flag)：是否当webview调用requestFocus时为页面的某个元素设置焦点，默认值 true
• setUseWideViewPort(boolean use)：是否支持viewport属性，默认值 false， 页面通过自适应手机屏幕
• setLoadWithOverviewMode(boolean overview)：是否使用overview mode加载页面，默认值 false，当页面宽度大于WebView宽度时，缩小使页面宽度等于WebView宽度
• setLayoutAlgorithm(LayoutAlgorithm l)：布局算法，默认是LayoutAlgorithm#NARROW_COLUMNS
• setJavaScriptEnabled(boolean flag)：是否支持Javascript，默认值false
• setSupportMultipleWindows(boolean support)：是否支持多窗口，默认值false
• setJavaScriptCanOpenWindowsAutomatically(boolean flag)：是否可用Javascript(window.open)打开窗口，默认值 false
• setAllowContentAccess(boolean allow)：/是否可访问Content Provider的资源，默认值 true
• setAllowFileAccess(boolean allow)：是否可访问本地文件，默认值 true
• setAllowFileAccessFromFileURLs(boolean flag)：是否允许通过file url加载的Javascript读取本地文件，默认值 false
• setAllowUniversalAccessFromFileURLs(boolean flag)：是否允许通过file url加载的Javascript读取全部资源(包括文件,http,https)，默认值 false
• setLoadsImagesAutomatically(boolean flag)：是否自动加载图片
• setBlockNetworkImage(boolean flag)：禁止加载网络图片
• setBlockNetworkLoads(boolean flag)：禁止加载所有网络资源
• setSupportZoom(boolean support)：是否支持缩放
• setBuiltInZoomControls(boolean enabled)：是否使用内置缩放机制
• setDisplayZoomControls(boolean enabled)：是否显示内置缩放控件
• setDefaultTextEncodingName(String encoding)：设置文本编码
• setDefaultFontSize(int size)：设置默认字体大小
• setDefaultFixedFontSize(int size)：默认等宽字体尺寸
• setMinimumFontSize(int size)：最小文字尺寸，默认值 8
• setMinimumLogicalFontSize(int size)：最小文字逻辑尺寸，默认值 8
• setTextZoom(int textZoom)：文字缩放百分比，默认值 100
• setStandardFontFamily(String font)：标准字体，默认值 "sans-serif"
• setSerifFontFamily(String font)：衬线字体，默认值 "serif"
• setSansSerifFontFamily(String font)：无衬线字体，默认值 "sans-serif"
• setFixedFontFamily(String font)：等宽字体，默认值 "monospace"
• setCursiveFontFamily(String font)：手写体，默认值 "cursive"
• setFantasyFontFamily(String font)：幻想体，默认值 "fantasy"
• setMediaPlaybackRequiresUserGesture(boolean require)：用户是否需要通过手势播放媒体(不会自动播放)，默认值 true
• setOffscreenPreRaster(boolean enabled)：是否在离开屏幕时光栅化(会增加内存消耗)，默认值 false
• setCacheMode(@CacheMode int mode)：用来设置WebView的缓存模式。当我们加载页面或从上一个页面返回的时候，会按照设置的缓存模式去检查并使用（或不使用）缓存。
  缓存模式有四种：
  • LOAD_DEFAULT：默认的缓存使用模式。在进行页面前进或后退的操作时，如果缓存可用并未过期就优先加载缓存，否则从网络上加载数据。这样可以减少页面的网络请求次数。
  • LOAD_CACHE_ELSE_NETWORK：只要缓存可用就加载缓存，哪怕它们已经过期失效。如果缓存不可用就从网络上加载数据。
  • LOAD_NO_CACHE：不加载缓存，只从网络加载数据。
  • LOAD_CACHE_ONLY：不从网络加载数据，只从缓存加载数据。
    通常我们可以根据网络情况将这几种模式结合使用，比如有网的时候使用LOAD_DEFAULT，离线时使用LOAD_CACHE_ONLY、LOAD_CACHE_ELSE_NETWORK，让用户不至于在离线时啥都看不到

3、WebViewClient

从名字上不难理解，这个类就像WebView的委托人一样，是帮助WebView处理各种通知和请求事件的

• public boolean shouldOverrideUrlLoading(WebView view, String url)
  拦截页面加载，返回true表示宿主app拦截并处理了该url，否则返回false由当前WebView处理
  此方法在API24被废弃，不处理POST请求

• public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
  拦截页面加载，返回true表示宿主app拦截并处理了该url，否则返回false由当前WebView处理
  此方法添加于API24，不处理POST请求，可拦截处理子frame的非http请求

• public WebResourceResponse shouldInterceptRequest(WebView view, String url)
  此方法废弃于API21，调用于非UI线程拦截资源请求并返回响应数据，返回null时WebView将继续加载资源。注意：API21以下的AJAX请求会走onLoadResource，无法通过此方法拦截

• public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)
  此方法添加于API21，调用于非UI线程，拦截资源请求并返回数据，返回null时WebView将继续加载资源

• public void onPageStarted(WebView view, String url, Bitmap favicon)
  页面(url)开始加载

• public void onPageFinished(WebView view, String url)
  页面(url)完成加载

• public void onLoadResource(WebView view, String url)
  将要加载资源(url)

• public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
  此方法废弃于API23， 主框架加载资源时出错

• public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error)
  此方法添加于API23，加载资源时出错，通常意味着连接不到服务器。由于所有资源加载错误都会调用此方法，所以此方法应尽量逻辑简单

• public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse)
  此方法添加于API23， 在加载资源(iframe,image,js,css,ajax...)时收到了 HTTP 错误(状态码>=400)

• public void onFormResubmission(WebView view, Message dontResend, Message resend)
  是否重新提交表单，默认不重发

• public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error)
  加载资源时发生了一个SSL错误，应用必需响应(继续请求或取消请求)， 处理决策可能被缓存用于后续的请求，默认行为是取消请求

• public void onReceivedClientCertRequest(WebView view, ClientCertRequest request)
  此方法添加于API21，在UI线程被调用， 处理SSL客户端证书请求，必要的话可显示一个UI来提供KEY。
  有三种响应方式：proceed()/cancel()/ignore()，默认行为是取消请求
  如果调用proceed()或cancel()，Webview 将在内存中保存响应结果且对相同的"host:port"不会再次调用 onReceivedClientCertRequest
  多数情况下，可通过KeyChain.choosePrivateKeyAlias启动一个Activity供用户选择合适的私钥

• public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
  处理HTTP认证请求，默认行为是取消请求

• public void onReceivedLoginRequest(WebView view, String realm, String account, String args)
  通知应用有个已授权账号自动登陆了

• public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event)
  给应用一个机会处理按键事件，如果返回true，WebView不处理该事件，否则WebView会一直处理，默认返回false

• public void onScaleChanged(WebView view, float oldScale, float newScale)
  通知应用页面缩放系数变化

一些关键方法调用流程：

• loadUrl()无重定向时

  onPageStarted->onPageFinished

• loadUrl()网页A重定向到B时

  onPageStarted->shouldOverrideUrlLoading->onPageStarted->onPageFinished->onPageFinished

• 在已加载的页面中点击链接，加载页面A（无重定向)

  shouldOverrideUrlLoading->onPageStarted->onPageFinished

• 在已加载的页面中点击链接，加载页面A（页面A重定向至页面B）

  shouldOverrideUrlLoading->onPageStarted->shouldOverrideUrlLoading->onPageStarted->onPageFinished->onPageFinished

• 执行goBack/goForward/reload方法

  onPageStarted->onPageFinished

• 发生资源加载

  shouldInterceptRequest->onLoadResource

• 页面加载

  shouldOverrideUrlLoading
  onProgressChanged[10]
  shouldInterceptRequest
  onProgressChanged[...]
  onPageStarted
  onProgressChanged[...]
  onLoadResource
  onProgressChanged[...]
  onReceivedTitle/onPageCommitVisible
  onProgressChanged[100]
  onPageFinished
  onReceivedIcon

4、WebChromeClient

• public void getVisitedHistory(ValueCallback callback)
  获得所有访问历史项目的列表，用于链接着色。

• public Bitmap getDefaultVideoPoster()
  

• public View getVideoLoadingProgressView()
  当全屏的视频正在缓冲时，此方法返回一个占位视图(比如旋转的菊花)。

• public void onProgressChanged(WebView view, int newProgress)
  接收当前页面的加载进度

• public void onReceivedTitle(WebView view, String title)
  接收文档标题

• public void onReceivedIcon(WebView view, Bitmap icon)
  接收图标(favicon)

• public void onShowCustomView(View view, CustomViewCallback callback)
  通知应用当前页进入了全屏模式，此时应用必须显示一个包含网页内容的自定义View

• public void onHideCustomView()
  通知应用当前页退出了全屏模式，此时应用必须隐藏之前显示的自定义View

• public boolean onJsAlert(WebView view, String url, String message, JsResult result)
  显示一个alert对话框

• public boolean onJsConfirm(WebView view, String url, String message, JsResult result)
  显示一个confirm对话框

• public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result)
  显示一个prompt对话框

• public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result)
  显示一个对话框让用户选择是否离开当前页面

• public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback)
  指定源的网页内容在没有设置权限状态下尝试使用地理位置API。
  从API24开始，此方法只为安全的源(https)调用，非安全的源会被自动拒绝

• public void onGeolocationPermissionsHidePrompt()
  当前一个调用 onGeolocationPermissionsShowPrompt() 取消时，隐藏相关的UI。

• public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg)
  通知应用打开新窗口

• public void onCloseWindow(WebView window)
  通知应用关闭窗口

• public void onRequestFocus(WebView view)
  请求获取取焦点

• public void onPermissionRequest(PermissionRequest request)
  通知应用网页内容申请访问指定资源的权限(该权限未被授权或拒绝)

• public void onPermissionRequestCanceled(PermissionRequest request)
  通知应用权限的申请被取消，隐藏相关的UI。

• public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams)
  为''显示文件选择器，返回false使用默认处理

• public boolean onConsoleMessage(ConsoleMessage consoleMessage)
  接收JavaScript控制台消息

5、CookieManager

• CookieManager getInstance()：获得一个CookieManager实例
• String getCookie(String url)：根据url获取Cookie，以字符串形式返回Cookie
• void setCookie(String url, String value)：为url设置Cookie
• void setCookie(String url, String value, ValueCallback callback)：
  callback的onReceiveValue方法获取的参数如果是true，代表本次设置成功，否则代表设置失败。如果并不关心执行结果，为callback参数传入null即可
• void setAcceptCookie(boolean accept)：设置WebView是否允许使用Cookie，这个方法针对的是当前应用的所有WebView。
• void setAcceptThirdPartyCookies(WebView webview, boolean accept)：设置WebView是否允许设置第三方Cookie，Android 5.0（API 21）以下默认为true，Android 5.0及以上默认为false
• void removeSessionCookie()：移除所有Session Cookies ，Android 5.0（API 21）已弃用
• void removeSessionCookies(ValueCallback callback)：移除所有Session Cookies（异步执行），在执行完移除操作后，会回调onReceiveValue方法
• void removeAllCookie()：移除所有Cookies ，Android 5.0（API 21）已弃用
• void removeAllCookies(ValueCallback callback)：移除所有Cookies（异步执行）
• boolean hasCookies()：判断是否存在Cookies
• void removeExpiredCookie()：移除过期的Cookies

三、特殊场景介绍

1、视口(viewport)

视口是一个为网页提供绘图区域的矩形。
你可以指定数个视口属性，比如尺寸和初始缩放系数(initial scale)。其中最重要的是视口宽度，它定义了网页水平方向的可用像素总数(可用的CSS像素数)。
多数 Android 上的网页浏览器(包括 Chrome)设置默认视口为一个大尺寸(被称为"wide viewport mode"，宽约 980px)。
也有许多浏览器默认会尽可能缩小以显示完整的视口宽度(被称为"overview mode")

// 是否支持viewport属性，默认值 false
// 页面通过``自适应手机屏幕
// 当值为true且viewport标签不存在或未指定宽度时使用 wide viewport mode
settings.setUseWideViewPort(true);
// 是否使用overview mode加载页面，默认值 false
// 当页面宽度大于WebView宽度时，缩小使页面宽度等于WebView宽度
settings.setLoadWithOverviewMode(true);

viewport 语法

通过WebView设置初始缩放(initial-scale)

// 设置初始缩放百分比
// 0表示依赖于setUseWideViewPort和setLoadWithOverviewMode
// 100表示不缩放
web.setInitialScale(0)

2、长按保存图片或者拨打电话

一般浏览器都有长按保存图片或者拨打图片的功能，实现这个功能和WebView.HitTestResult这个类有关，这个类会将你触摸网页的地方的类型和其他信息反馈给你。

WebView.HitTestResult的常用方法：

• HitTestResult.getExtra()：获取额外的信息。
• HitTestResult.getType()：获取所选中目标的类型，可以是图片，超链接，邮件，电话等等。

  WebView.HitTestResult.UNKNOWN_TYPE //未知类型  
  WebView.HitTestResult.PHONE_TYPE //电话类型
  WebView.HitTestResult.EMAIL_TYPE //电子邮件类型
  WebView.HitTestResult.GEO_TYPE //地图类型
  WebView.HitTestResult.SRC_ANCHOR_TYPE //超链接类型
  WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE //带有链接的图片类型
  WebView.HitTestResult.IMAGE_TYPE //单纯的图片类型
  WebView.HitTestResult.EDIT_TEXT_TYPE //选中的文字类型
  

1. 给WebView设置长按监听事件；
2. 获取WebView长按时的WebView.HitTestResult的事件类型，如果是图片，则做处理。

webView.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View view) {
        WebView.HitTestResult result = ((WebView) view).getHitTestResult();
        if(result != null){
            switch (result.getType()){
                case WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE:
                    String imgUrl = result.getExtra();
                    ...
                    return true;
                ...
            }
        }
        return false;
    }
});

3、与Javascript交互

启用Javascript

// 是否支持Javascript，默认值false
settings.setJavaScriptEnabled(true); 

注入对象到Javascript

// 注入对象'jsobj'，在网页中通过`jsobj.say(...)`调用
web.addJavascriptInterface(new JSObject(), "jsobj") 

在API17后支持白名单，只有添加了@JavascriptInterface注解的方法才会注入JS

public class JSObject {
    @JavascriptInterface
    public void say(String words) {
      // todo
    }
}

移除已注入Javascript的对象

web.removeJavascriptInterface("jsobj")

执行JS表达式

// 弹出提示框
web.loadUrl("javascript:alert('hello')");
// 调用注入的jsobj.say方法
web.loadUrl("javascript:jsobj.say('hello')"); 

在API19后可异步执行JS表达式，并通过回调返回值

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    vWeb.evaluateJavascript("111+222", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
            // value => "333"
        }
    });
}

4、全屏(Fullscreen)

• 当H5请求全屏时，会回调 WebChromeClient.onShowCustomView 方法
• 当H5退出全屏时，会回调 WebChromeClient.onHideCustomView 方法

1. manifest
   自己处理屏幕尺寸方向的变化(切换屏幕方向时不重建activity)
   WebView播放视频需要开启硬件加速

2. 处理全屏回调

CustomViewCallback mCallback;
View vCustom;

@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
    setFullscreen(true);
    vCustom = view;
    mCallback = callback;
    if (vCustom != null) {
        ViewGroup parent = (ViewGroup) vWeb.getParent();
        parent.addView(vCustom);
    }
}

@Override
public void onHideCustomView() {
    setFullscreen(false);
    if (vCustom != null) {
        ViewGroup parent = (ViewGroup) vWeb.getParent();
        parent.removeView(vCustom);
        vCustom = null;
    }
    if (mCallback != null) {
        mCallback.onCustomViewHidden();
        mCallback = null;
    } 
} 

4. 设置全屏，切换屏幕方向

void setFullscreen(boolean fullscreen) { 
    if (fullscreen) {
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        vToolbar.setVisibility(View.GONE);
        vWeb.setVisibility(View.GONE);
    } else {
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN, WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
        vToolbar.setVisibility(View.VISIBLE);
        vWeb.setVisibility(View.VISIBLE);
    }
    if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    } else {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }
}

参考：
1、Android WebView 详解
2、WebView·开车指南
3、Android WebView 常用API参考手册