Android WebView使用详解及注意事项

未经本人授权，不得转载！否则必将维权到底

目前很多公司的 App 就只使用一个 WebView 作为整体框架， App 中的所有内容全部使用 HTML5 进行展示，这样只需要写一次 HTML5 代码，就可以在 Android 和 iOS 平台上运行，这就是所谓的「 跨平台 」。随着 HTML5 的普及，很多 App 都会内嵌 WebView 来加载 HTML5 页面，即 Native 和 HTML5 共存，这就是当下最流行的「 混合开发 」。个人觉得 HTML5 最大的优势是迭代方便, 只需要修改服务端的 HTML5 页面，App 会同步更新，无论是做活动推广 App 还是及时修复 Bug 都带来的极大的便利。不过 HTML5 劣势也很明显，受制于国内的网速限制。 虽然国内已经普及了 4g 网络，但是网速还是不尽如人意。HTML5 加载受限于网络，没有原生控件流畅，用户体验相对较差， 所以目前完全使用 HTML5 开发 App 并没有成为主流。

一、基本用法

1、添加网络权限

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

2、在 App 布局中添加一个 WebView：

<WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

3、在 Activity 里找到添加的 WebView 控件：

WebView webView = (WebView) findViewById(R.id.webview);

4、使用 WebView 加载网页

//加载网页链接
webView.loadUrl("http://keithxiaoy.com");
//加载本地assets目录下的网页
webView.loadUrl("file:///android_asset/keithxiaoy.html");
//加载手机本地的html页面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/keithxiaoy.html");
//加载 HTML 页面的一小段内容。参数1：需要截取展示的内容、参数2：展示内容的类型、参数3：字节码
webView.loadData(String data, String mimeType, String encoding)

二、WebView 的基本设置

WebSettings webSettings = mWebView.getSettings();
//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);  
// 若加载的 html 里有JS 在执行动画等操作，会造成资源浪费（CPU、电量）
// 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 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_CACHE_ELSE_NETWORK); //关闭webview中缓存 
webSettings.setAllowFileAccess(true); //设置可以访问文件 
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 
webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

WebViewClient

    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            Log.d("KeithXiaoY","开始加载");
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            Log.d("KeithXiaoY","加载结束");
        }

        // 链接跳转都会走这个方法
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Log.d("KeithXiaoY","Url："+ url );
            view.loadUrl(url);// 强制在当前 WebView 中加载 url      
            return true;
        }
    });

WebChromeClient

    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
            Log.d("KeithXiaoY","newProgress："+ newProgress );
        }

        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            Log.d("KeithXiaoY","标题："+ title);
        }
    });

WebView 中网页的前进 / 后退

    webView.goBack();//跳到上个页面
    webView.goForward();//跳到下个页面
    webView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
    webView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)

常见用法：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);
}

三、WebView 高级用法

1、缓存

• 缓存设置

//优先使用缓存: 
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);

• 清理缓存

//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
webView.clearCache(true);

//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
webView.clearHistory()；

//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
webView.clearFormData()；

另外一种方式:
//删除缓存文件夹
File file = CacheManager.getCacheFileBaseDir(); 

if (file != null && file.exists() && file.isDirectory()) { 
for (File item : file.listFiles()) { 
    item.delete(); 
     } 
    file.delete(); 
} 

//删除缓存数据库
context.deleteDatabase("webview.db"); 
context.deleteDatabase("webviewCache.db");

2、Cookie

• Cookie 设置

  CookieSyncManager.createInstance(this);
  CookieManager cookieManager = CookieManager.getInstance();
  cookieManager.setAcceptCookie(true);
  
  String cookie = "name=xxx;age=18";
  cookieManager.setCookie(URL, cookie);
  CookieSyncManager.getInstance().sync();
  

• 获取 Cookie

  CookieManager cookieManager = CookieManager.getInstance();
  String cookie = cookieManager.getCookie(URL);
  

• 清除 Cookie

  CookieSyncManager.createInstance(context);  
  CookieManager cookieManager = CookieManager.getInstance(); 
  cookieManager.removeAllCookie();
  CookieSyncManager.getInstance().sync();  
  

3、Android 和 JavaScript 交互

JavaScript 和 Android 可以交互，我们可以在网页中随意调用本地的 Java 代码，实现了 WebView 和本地代码的交互。所以 WebView 的功能非常强大，我们直接在一个 WebView 中就几乎可以实现 Android 的所有功能，所以现在才会出现不少纯 HTML5 开发的 App，这往往适合创业型公司刚起步阶段。

• JavaScript 调用 Android

  WebSettings settings = mWebView.getSettings();
  settings.setJavaScriptEnabled(true);//开启JavaScript 
  
  mWebView.loadUrl("file:///android_asset/keithxiaoy.html");//加载本地网页
  mWebView.setWebChromeClient(new WebChromeClient());//此行代码可以保证JavaScript的Alert弹窗正常弹出
  
  //核心方法, 用于处理JavaScript被执行后的回调
  mWebView.addJavascriptInterface(new JsCallback() {
  
      @JavascriptInterface//注意:此处一定要加该注解,否则在4.1+系统上运行失败
      @Override
      public void onJsCallback() {
          System.out.println("JavaScript调用Android啦");
      }
  }, "keithxiaoy");//参1是回调接口的实现;参2是JavaScript回调对象的名称
  
  //定义回调接口
  public interface JsCallback {
      public void onJsCallback();
  }
  

• Android 调用 JavaScript

  //直接使用webview加载js就可以了
  mWebView.loadUrl("javascript:wave()");
  

• 附上 keithxiaoy.html 源码

      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      </head>
      <script language="javascript">
          /* This function is invoked by the activity */
          function wave() {
              alert("Android调用JavaScript");
          }
      </script>
      <body>
          <!-- JavaScript调用Android代码 -->
          <a onClick="window.demo.onJsCallback()"><div style="width:80px;
              margin:0px auto;
              padding:10px;
              text-align:center;
              border:2px solid #202020;" >
                  ![](android_normal.png)<br>
                  Click me!
          </div></a>
      </body>
  </html>

  注意：JavaScript 回调的方法的书写格式: onClick=”window.demo.onJsCallback()
  格式是: Windows.js 回调对象的名称(要和 Java 代码中设置的一致)。回调方法名称(要和 Java 代码中设置的一致)

• 注意事项
  JavaScript 调用 Android 的方式具有版本兼容问题。经测试，在 2.2、4.0+ 系统上运行稳定，可以正常调用，但是在 2.3 系统上运行时出现崩溃。原因是底层进行 JNI 调用时，把一个 Java 中的 String 对象当数组来访问了，最终导致虚拟机崩溃。基本算是一个比较严重的 Bug，没办法解决。所以如果说用 WebView 组件想在 JavaScript 和 Java 互调就没办法适配所有机型。

本文参考：

Android开发：最全面、最易懂的Webview使用详解
Google Issue Tracker
android2.3上用WebView组件js和java相互调用报错

---

本文原创发布于微信公众号「keithxiaoy」，编程、思维、成长、正能量，关注并回复「编程」、「阅读」、「Java」、「Python」等关键字获取免费学习资料