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>  
1
2
3

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

<WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
1
2
3
4

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

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

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)

1
2
3
4
5
6
7
8
9

二、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");//设置编码格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

###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;
		}
	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

###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);
		}
	});
1
2
3
4
5
6
7
8
9
10
11
12
13

###WebView 中网页的前进 / 后退

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

####常见用法：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);
}
1
2
3
4
5
6
7

三、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);
1
2
3
4
5
6
7
8
9

• 清理缓存

//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对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");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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();
  1
  2
  3
  4
  5
  6
  7

• 获取 Cookie

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

• 清除 Cookie

    CookieSyncManager.createInstance(context);  
    CookieManager cookieManager = CookieManager.getInstance(); 
    cookieManager.removeAllCookie();
    CookieSyncManager.getInstance().sync();  
  1
  2
  3
  4

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();
    }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

• Android 调用 JavaScript

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

• 附上 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;" >
                   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mRUrXX9I-1679465778299)(android_normal.png)]<br>
                   Click me!
           </div></a>
       </body>
   </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

	注意：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使用详解](http://www.jianshu.com/p/3c94ae673e2a)
[Google Issue Tracker ](https://issuetracker.google.com/issues/36923426)
[android2.3上用WebView组件js和java相互调用报错](http://www.2cto.com/kf/201108/101375.html)
1
2
3
4
5
6
7
8
9
10