Android WebView使用详解及注意事项

程序员K哥

已于 2023-03-22 14:18:36 修改

阅读量5.4k

点赞数 2

分类专栏： Android 文章标签： android webview javascript

于 2018-07-10 14:45:20 首次发布

本文链接：https://blog.csdn.net/XiaoY_yan/article/details/80985827

版权

Android 专栏收录该内容

27 篇文章 5 订阅

订阅专栏

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

目前很多公司的 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;" >
                 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mRUrXX9I-1679465778299)(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使用详解](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)

程序员K哥

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Android WebView使用详解及注意事项

未经本人授权，不得转载！否则必将维权到底目前很多公司的 App 就只使用一个 WebView 作为整体框架， App 中的所有内容全部使用 HTML5 进行展示，这样只需要写一次 HTML5 代码，就可以在 Android 和 iOS 平台上运行，这就是所谓的「跨平台」。随着 HTML5 的普及，很多 App 都会内嵌 WebView 来加载 HTML5 页面，即 Native 和 ...
复制链接

扫一扫