Android与WebView的同步和异步访问机制

于 2014-08-04 13:25:04 发布 11465 收藏 2
分类专栏： Android 开发记录 文章标签： Android WebViewClient WebChromeClient 同步 异步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linmiansheng/article/details/38324013
版权
Android 开发记录 专栏收录该内容
57 篇文章 0 订阅
订阅专栏

大家都知道，通过WebView，我们可以在Android客户端，用Web开发的方式来开发我们的应用。

如果一个应用就是单纯一个WebView，所有的逻辑都只需要在网页上交互的话，那我们其实就只需要通过html和javascript来跟服务器交互就可以了。

但是很多情况下，我们的应用不是单纯一个WebView就可以了，有可能会需要运用到Android本身的应用，比如拍照，就需要调用Android本身的照像机等，要产生震动，在需要运用到手机特性的一些场景下，肯定需要这么一套机制在javascript和Android之间互相通信，包括同步和异步的方式，而这套机制就是本文中我想要介绍的。

一步一步来，我们先从最简单的地方讲起：

1）需要一个WebView去展现我们的页面，首先定义一个布局，非常简单，就是一个WebView，如下： 

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width= "match_parent"
  3.     android:layout_height= "match_parent"
  4.     android:orientation= "vertical">
  5.  
  6.     <WebView
  7.         android:id="@+id/html5_webview"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent" />
  10.  
  11. </LinearLayout>

这个WebView就是承载我们页面展现的一个最基本的控件，所有在页面上的逻辑，需要跟Android原生环境交互的逻辑数据都是通过它来传输的。

2）在对应的Activity中，对WebView进行一些初始化

  1. mWebView = (WebView) findViewById(R.id. html5_webview );
  2. WebSettings webSettings = mWebView.getSettings();
  3. webSettings.setJavaScriptCanOpenWindowsAutomatically( true );
  4. webSettings.setJavaScriptEnabled( true );
  5. webSettings.setLayoutAlgorithm(LayoutAlgorithm. NORMAL );
  6.  
  7.  
  8. mWebView.setWebChromeClient( new WebServerChromeClient());
  9. mWebView.setWebViewClient( new WebServerViewClient());
  10.  
  11. mWebView.setVerticalScrollBarEnabled( false );
  12. mWebView.requestFocusFromTouch();
  13.  
  14. mWebView.addJavascriptInterface( new AppJavascriptInterface(), "nintf" );


在上面的代码中，主要是对WebView的一些初始化，但其中最重要的几句代码是这么几句： 

2.1）webSettings.setJavaScriptEnabled( true );

告诉WebView,让它能够去执行JavaScript语句。在一个交互的网页上，javascript是没办法忽略的。

  1. 2.2）mWebView.setWebChromeClient( new WebServerChromeClient());
  2. 2.3）mWebView.setWebViewClient( new WebServerViewClient());
WebChromeClient和WebViewClient是WebView应用中的两个最重要的类。

通过这两个类，WebView能够捕获到Html页面中url的加载，javascript的执行等的所有操作，从而能够在Android的原生环境中对这些来自网页上的事件进行判断，解析，然后将对应的处理结果返回给html网页。

这两个类是html页面和Android原生环境交互的基础，所有通过html页面来跟后台交互的操作，都在这两个类里面实现，在后面我们还会详细说明。

2.4）mWebView.addJavascriptInterface( new AppJavascriptInterface(), "nintf" );

这个JavascriptInterface，则是Android原生环境和javascript交互的另一个窗口。

将我们自定义的AppJavascriptInterface类，调用mWebView的addJavascriptInterface方法，可以将这个对象传递给mWebView中Window对象的nintf属性（"nintf"这个属性名称是自定义的）之后，

就可以直接在javascript中调用这个Java对象的方法。


3）接下来，我们就先来看看在Html中的javascript是如何跟Android原生环境来交互的。

我们按照事件发生的顺序机制来看，这样有个先后的概念，理解起来会容易一点。

在这套机制中，提供了两种访问Android原生环境的方法，一种是同步的，一种是异步的。

同步的概念就是说，我在跟你交流的时候，如果我还没有收到你的回复，我是不能跟其他人交流的，我必须等在那里，一直等着你。

异步的概念就是说，我在跟你交流的时候，如果你还没有回复我，我还能够去跟其他人交流，而当我收到你的回复的时候，再去看看你的回复，应该要干些什么。

3.1）同步访问

在Javascript中，我们定义了这样一个方法，如下：

  1. var exec = function (service, action, args) {
  2.         var json = {
  3.                "service" : service,
  4.                "action" : action
  5.        };
  6.         var result_str = prompt(JSON.stringify(json), args);
  7.  
  8.         var result;
  9.         try {
  10.               result = JSON.parse(result_str);
  11.        } catch (e) {
  12.               console.error(e.message);
  13.        }
  14.  
  15.         var status = result.status;
  16.         var message = result.message;
  17.         if (status == 0) {
  18.  
  19.                return message;
  20.        } else {
  21.               console.error( "service:" + service + " action:" + action + " error:" + message);
  22.        }
  23. }

而对此方法的，典型的调用如下： 

exec( "Toast", "makeTextShort" , JSON.stringify(text));

其中Toast和makeTextShort是要调用Android原生环境的服务和参数，这些都是在PluginManager中管理的，在下一篇文章中会提及到。

在这里，我们调用了prompt方法，通过这个方法，在WebView中定义的的WebChromeClient就会拦截到这样一个方法，具体代码如下：

  1. class WebServerChromeClient extends WebChromeClient {
  2.      @Override
  3.     public boolean onJsPrompt(WebView view, String url, String message,
  4.               String defaultValue, JsPromptResult result) {   
  5.          System.out.println( "onJsPrompt:defaultValue:" + defaultValue + "|" + url + "," + message);
  6.          JSONObject args = null ;
  7.          JSONObject head = null ;
  8.          try {
  9.               head = new JSONObject(message);            
  10.               args = new JSONObject(defaultValue);
  11.               String execResult = mPluginManager.exec(head.getString(IPlugin.SERVICE),
  12.                         head.getString(IPlugin.ACTION), args);
  13.  
  14.               result.confirm(execResult);
  15.               return true;
  16.  
  17.          ...
  18.         
  19.     }         
  20. }

在这里，我们会重载WebChromeClient的onJsPrompt方法，当此方法返回true的时候，就说明WebChromeClient已经处理了这个prompt事件，不需要再继续分发下去；

而当返回false的时候，则此事件会继续传递给WebView，由WebView来处理。

由于我们这里是要利用这个Prompt方法，来实现Javascript跟Android原生环境之间的同步访问，所以我们在这里会拦截这个事件进行处理。

在这里，通过message和defaultValue，我们可以拿到javascript中prompt方法两个参数的值，在这里，它们是Json数据，在这里进行解析之后，由PluginManager来进行处理，最后将结果返回给JsPromptResult的confirm方法中。

此结果就是javascript中prompt的返回值了。

而除了JsPrompt，还有类似Javascript中的Alert方法等，我们知道浏览器弹出的Alert窗口跟我们手机应用中窗口风格样式是很不一样的，而作为一个应用，风格肯定要有一套统一的标准，所以一般情况下，我们也会拦截WebView中的Alert窗口，这个逻辑也同样会是在这里处理，如下：

  1. @Override
  2. public boolean onJsAlert(WebView view, String url, String message,
  3.                final JsResult result) {
  4.        System. out .println("onJsAlert : url:" + url + " | message:" + message);
  5.         if (isFinishing()) {
  6.                return true ;
  7.        }
  8.        CustomAlertDialog.Builder customBuilderres = new CustomAlertDialog.Builder(DroidHtml5.this );
  9.        customBuilderres.setTitle( "信息提示" ).setMessage(message)
  10.                      .setPositiveButton( "确定" , new DialogInterface.OnClickListener() {
  11.                             public void onClick(DialogInterface dialog, int which) {
  12.                                   dialog.dismiss();
  13.                                   result.confirm();
  14.                            }
  15.                      }).create().show();
  16.         return true ;
  17. }


上面描述的都是同步访问Android原生环境的方式，那么，异步的访问方式是怎么样的呢？

3.2）异步访问

同样的，我们会在Javascript中定义如下一个方法：

  1. var exec_asyn = function(service, action, args, success, fail) {
  2.        var json = {
  3.                "service" : service,
  4.                "action" : action
  5.        };              
  6.        var result = AndroidHtml5.callNative(json, args, success, fail);  
  7. }


我们会调用AndroidHtml5的callNative，此方法有四个参数：

a）json：是调用的服务和操作

b）args: 对应的参数数

c）success : 成功时的回调方

d）fail：失败时的回调方

典型的调用如下：

  1. var success = function(data){};
  2. var fail = functio(data){};
  3. exec_asyn( "Contacts", "openContacts" , '{}', success, fail);

在这里,AndroidHtml5是在Javascript中定义的一个对象，它提供了访问Android原生环境的方法，以及回调的队列函数。它的定义如下： 
  1. var AndroidHtml5 = {
  2.        idCounter : 0,                 // 参数序列计数器
  3.        OUTPUT_RESULTS : {},      // 输出的结果       
  4.        CALLBACK_SUCCESS : {},  // 输出的结果成功时调用的方法        
  5.        CALLBACK_FAIL : {},       // 输出的结果失败时调用的方法
  6.  
  7.        callNative : function (cmd, args, success, fail) {
  8.               var key = "ID_" + (++ this.idCounter);
  9.              
  10.               window.nintf.setCmds(cmd, key);
  11.               window.nintf.setArgs(args, key);
  12.               
  13.               if (typeof success != 'undefined'){
  14.                     AndroidHtml5.CALLBACK_SUCCESS[key] = success;
  15.               } else {
  16.                     AndroidHtml5.CALLBACK_SUCCESS[key] = function (result){};
  17.               }
  18.               
  19.               if (typeof fail != 'undefined'){
  20.                     AndroidHtml5.CALLBACK_FAIL[key] = fail;
  21.               } else {
  22.                     AndroidHtml5.CALLBACK_FAIL[key] = function (result){};
  23.               }
  24.               
  25.               //下面会定义一个Iframe，Iframe会去加载我们自定义的url，以androidhtml:开头                         
  26.               var iframe = document.createElement("IFRAME" );
  27.               iframe.setAttribute( "src" , "androidhtml://ready?id=" + key);
  28.               document.documentElement.appendChild(iframe);
  29.               iframe.parentNode.removeChild(iframe);
  30.               iframe = null ;
  31.  
  32.               return this .OUTPUT_RESULTS[key];
  33.        }, 
  34.  
  35.        callBackJs : function (result,key) {
  36.                this .OUTPUT_RESULTS[key] = result;
  37.                var obj = JSON.parse(result);
  38.                var message = obj.message;
  39.                var status = obj.status;                 
  40.                if (status == 0) {
  41.                       if (typeof this.CALLBACK_SUCCESS[key] != "undefined"){
  42.                            setTimeout( "AndroidHtml5.CALLBACK_SUCCESS['" +key+"']('" + message + "')", 0);
  43.                      }
  44.               } else {
  45.                       if (typeof this.CALLBACK_FAIL != "undefined") {
  46.                            setTimeout( "AndroidHtml5.CALLBACK_FAIL['" +key+"']('" + message + "')" , 0);
  47.                      }
  48.               }
  49.        }
  50. };

在AndroidHtml5中，有几个地方我们需要注意的。
a）大家还记得我们在WebView初始化时设置的AppJavascriptInterface吗？当时自定义的名称就是"nintf"，而在此时，在javascript中，我们就可以直接来运用这个对象所有的方法。 
  1. window.nintf.setCmds(cmd, key);
  2. window.nintf.setArgs(args, key);

我们也看一下这个AppJavascriptInterface中的方法，如下： 
  1. public class AppJavascriptInterface implements java.io.Serializable {
  2.         
  3.         private static Hashtable<String,String> CMDS = new Hashtable<String,String>();
  4.         private static Hashtable<String,String> ARGS = new Hashtable<String,String>();
  5.                
  6.         @JavascriptInterface
  7.         public void setCmds(String cmds, String id) {
  8.                CMDS .put(id, cmds);
  9.        }      
  10.      
  11.         @JavascriptInterface
  12.         public void setArgs(String args, String id) {
  13.                ARGS .put(id, args);
  14.        }
  15.     
  16.         public static String getCmdOnce(String id) {
  17.               String result = CMDS .get(id);
  18.                CMDS .remove(id);
  19.                return result;
  20.        }
  21.  
  22.         public static String getArgOnce(String id) {
  23.               String result = ARGS .get(id);
  24.                ARGS .remove(id);
  25.                return result;
  26.        }
  27. }

这个类是简洁而不简单，通过在Javascript中调用类中的set方法，将对应的cmd和args参数给保存起来，目的是为了保存异步请求中多次的命令和操作，然后在Android原生环境中再取出来。

b）第二步呢，也是最重要的一步，会创建一个Iframe，在Iframe中申明一个url，而且是以androidhtml: 开头的。
在上面我们提过，WebView在初始化的时候，会设置一个WebViewClient，这个类的主要作用就是，当在html页面中发生url加载的时候，我们可以拦截这个加载事件，进行处理，重写这次加载事件。
而我们正好是利用了这一点，利用一个Iframe来触发一次Url的拦截事件。
我们来看一下WebViewClient中是如何实现这个异步请求的实现的。 

  1. class WebServerViewClient extends WebViewClient {
  2.        
  3.        Handler myHandler = new Handler() {
  4.                ...
  5.        };
  6.  
  7.         @Override
  8.         public boolean shouldOverrideUrlLoading(WebView view, String url) {
  9.  
  10.                if (url != null && url.startsWith( "androidhtml")) {
  11.                     String id = url.substring(url.indexOf( "id=" ) + 3);
  12.                     JSONObject cmd = null ;
  13.                     JSONObject arg = null ;
  14.                      try {
  15.                            String cmds = AppJavascriptInterface.getCmdOnce(id);
  16.                            String args = AppJavascriptInterface.getArgOnce(id);
  17.                            cmd = new JSONObject(cmds);
  18.                            arg = new JSONObject(args);
  19.                     } catch (JSONException e1) {
  20.                            e1.printStackTrace();
  21.                             return false ;
  22.                     }
  23.                     //另起线程处理请求
  24.                      try {
  25.                            AsynServiceHandler asyn = new AsynServiceHandlerImpl();
  26.                            asyn.setKey(id); 
  27.                            asyn.setService(cmd.getString( "service" ));
  28.                            asyn.setAction(cmd.getString( "action" ));
  29.                            asyn.setArgs(arg);
  30.                            asyn.setWebView( mWebView);
  31.                            asyn.setMessageHandler( myHandler );
  32.                            Thread thread = new Thread(asyn, "asyn_" + (threadIdCounter ++));
  33.                            thread.start();
  34.                     } catch (Exception e) {
  35.                            e.printStackTrace();
  36.                             return false;
  37.                     }
  38.                      return true ;
  39.               }
  40.               //如果url不是以Androidhtml开头的，则由WebView继续去处理。
  41.               view.loadUrl(url);
  42.               return true ;
  43.        }
  44.        
  45. }
我们可以看到，在这方法中，首先只有以androidhtml开头的url才会被拦截处理，而其他的url则还是由WebView进行处理。

而通过AppJavascriptInterface，我们将在Javascript中保存的cmds和args等数据都拿出来了，并由AsynServiceHandler新启一个线程去处理。

我们再来看看AsynServiceHandlerImpl是怎么实现的，

  1. public class AsynServiceHandlerImpl implements AsynServiceHandler {
  2.         @Override
  3.         public void run() {             
  4.            try {
  5.               final String responseBody = PluginManager.getInstance().exec(service,  action,args);                     
  6.               handler.post( new Runnable() {
  7.                       public void run() {       
  8.                            webView .loadUrl( "javascript:AndroidHtml5.callBackJs('"+responseBody+ "','" +key +"')" );
  9.                       }
  10.               });
  11.            } catch (PluginNotFoundException e) {
  12.                e.printStackTrace();
  13.            }
  14.        }
可以看到，当调用PluginManager操作完对应的命令和数据之后，会通过WebView的loadUrl方法，去执行AndroidHtml5的callBackJs方法。

通过key值，我们就可以在AndroidHtml5中的callBackJs方法中找回到对应的回调方法，进行处理。

因此，通过一次Iframe的构建，加载以androidhtml开头的url，再利用WebView的WebViewClient接口对象，我们就能够在Html页面中和Android原生环境进行异步的交互了。

在这一篇文章中，我们几处地方讲到了PluginManager这个类，这是一个管理HTML和Android原生环境交互接口的类。

因为如果把所有的逻辑都放在WebViewClient或者WebChromeClient这两个都来处理，这是不合理的，乱，复杂，看不懂。

所以我们需要把逻辑实现跟交互给分开来，这个机制才显得漂亮，实用，易操作。


linmiansheng
关注
专栏目录
AsyncImageLoadWebView:在android WebView中异步加载图像-源码
06-25
AsyncImageLoadWebView 在 android WebView 中异步加载图像。
Android WebView 实现同步登陆和注销登录
ZhangLei280的博客
11-10 1966
最近老大要把APP的界面大部分替换成H5的界面，但是登录的操作还是要自己去请求PHP的接口，不过登录的界面也是H5，这就显得有点尴尬啦，这种操作会导致，你的登录操作虽然是成功的，但是H5的界面是不会有任何的变化的，既然我们登录成功，那么肯定是希望H5界面会显示用户的一些信息，比如说头像，昵称什么的，在这里说一下ios没有这种情况的产生。既然已经产生了这种问题，身为程序员的我们当然要解决啦，这种情况我
参与评论