WebView与JavaScript交互的四种形式

WebView如果作为简单的网页浏览器&＃xff0c;对于一般的浏览行为来说&＃xff0c;已经足够了。可做为企业开发者&＃xff0c;你的App通常要嵌入自家公司的网页&＃xff0c;如此一来&＃xff0c;还得考虑App与Web之间的消息传递&＃xff0c;这就涉及到App的原生代码与Web的JS代码之间的通信了。
App与Web做为消息通信的双方&＃xff0c;具体的交互行为分为四类&＃xff0c;包括&＃xff1a;App通知Web执行某项动作、App主动从Web获取信息、Web通知App执行某项动作&＃xff0c;Web主动从App获取信息&＃xff0c;这四种行为详细说明如下&＃xff1a;

Web提供一个Javascript方法&＃xff0c;然后App由WebView调用loadUrl加载该JS方法&＃xff0c;具体的App代码如下所示&＃xff1a;

        wv_js.loadUrl("Javascript:showMsgFromWeb()");

该行为的执行效果如下图所示&＃xff0c;App通知JS调用showMsgFromWeb方法&＃xff0c;该方法弹出了一个alert消息框。

WebView对象调用evaluateJavascript方法&＃xff0c;该方法通过回调接口ValueCallback获得JS的返回串&＃xff0c;具体的App代码如下所示&＃xff1a;

        if (Build.VERSION.SDK_INT >&＃61; Build.VERSION_CODES.KITKAT) {// evaluateJavascript该方法为4.4以后引入wv_js.evaluateJavascript("getMsgFromWeb()", new ValueCallback() {&＃64;Overridepublic void onReceiveValue(String value) {AlertDialog.Builder builder &＃61; new AlertDialog.Builder(WebScriptActivity.this);builder.setTitle("来自安卓的对话框").setMessage(UnicodeToString(value));builder.create().show();}});} else {Toast.makeText(this, " Android4.4之后才支持该功能", Toast.LENGTH_SHORT).show();}

该行为的执行效果如下图所示&＃xff0c;App通知JS调用getMsgFromWeb方法&＃xff0c;获得返回消息后再由App自行弹窗。

App需要定义一个专门给JS使用的类&＃xff0c;并在该类中实现JS要调用的方法&＃xff0c;具体的类代码如下所示&＃xff1a;

    private final class Client {&＃64;JavascriptInterfacepublic void showMsgFromAndroid(String msg) {  //如要返回值可把void改为String等等类型AlertDialog.Builder builder &＃61; new AlertDialog.Builder(WebScriptActivity.this);builder.setTitle("来自安卓的对话框").setMessage(msg);builder.create().show();}&＃64;JavascriptInterfacepublic String getMsgFromAndroid(String msg) {return "这是Android返回的字符串&＃xff1a;"&＃43;msg;}}

接着还要调用WebView对象的addJavascriptInterface方法&＃xff0c;给这个新类注册一个实例名&＃xff0c;然后JS才能通过该实例名调用App的方法。注册实例名的代码如下所示&＃xff1a;

        wv_js.addJavascriptInterface(new Client(), "client");

该行为的执行效果如下图所示&＃xff0c;Web调用App的showMsgFromAndroid方法&＃xff0c;该方法弹出了一个AlertDialog。

该行为的主要流程同行为三&＃xff0c;区别在于App方法的返回值类型由void改为String&＃xff0c;然后JS即可从App获得返回信息。
该行为的执行效果如下图所示&＃xff0c;Web调用App的getMsgFromAndroid方法获得字符串&＃xff0c;然后Web把该消息以alert方式弹窗。

下面是演示WebView与Javascript交互用到的html文件源码&＃xff1a;








测试js使用

让android弹窗

调用Android方法获得字符串




为了区分对话框是App来源的弹窗还是Web来源的弹窗&＃xff0c;这里重写了WebChromeClient的onJsAlert方法&＃xff0c;通过setTitle方法区分本次弹窗的来源途径。重写后的方法代码如下所示&＃xff1a;

        public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {String title &＃61; mTitle;if (title&＃61;&＃61;null || title.length()<&＃61;0) {title &＃61; "来自网页的对话框";}AlertDialog.Builder builder &＃61; new AlertDialog.Builder(WebScriptActivity.this).setTitle(title).setMessage(message).setPositiveButton("确定",new DialogInterface.OnClickListener() {&＃64;Overridepublic void onClick(DialogInterface dialog, int which) {result.confirm();}});//setCancelable要设置为false&＃xff0c;点击对话框外部时不让关闭对话框//不然JsResult的confirm方法没有得到执行&＃xff0c;网页上的其它控件就不可使用builder.setCancelable(false).create().show();return true;}

另外还需注意WebView与Javascript相互调用的几个要点&＃xff1a;
1. WebView要调用setWebChromeClient方法设置JS的解释客户端&＃xff0c;从而避免JS中alert方法不弹窗的问题&＃xff0c;因为JS页面的渲染需要WebChromeClient去实现。
2. 如果JS调用App代码时报错“Uncaught TypeError: Object [object Object] has no method”&＃xff0c;那是因为Android4.2以上版本默认不开放JS调用本地方法的权限&＃xff0c;得给开放JS调用的方法加上“&＃64;JavascriptInterface”注释&＃xff0c;该注释允许JS代码访问APP的指定方法。
3. evaluateJavascript是Android在4.4.2之后才引入的新方法&＃xff0c;如果是4.4.2之前的Android版本&＃xff0c;需要注意做兼容处理。
4. JS调用App方法&＃xff0c;返回值中的中文是正常&＃xff1b;但App获取JS方法&＃xff0c;返回值的中文却是“\u”打头的字符串&＃xff0c;所以要先将JS返回的字符串做转义处理&＃xff0c;转义后的字符串才是App能够处理的正常汉字。
5. 如果App与JS存在嵌套调用&＃xff08;即A调用B&＃xff0c;B内部又去调用A&＃xff09;&＃xff0c;那么Android4.4.2之后务必要保证两个调用在同一个线程中&＃xff0c;不然运行时会报错“java.lang.Throwable: A WebView method was called on thread &＃39;JavaBridge&＃39;. All WebView methods must be called on the same thread.”。具体的解决方法是&＃xff1a;调用WebView对象的post方法&＃xff0c;然后在post的Runnable任务中再去调用JS方法&＃xff0c;例子代码如下所示&＃xff1a;

    private final class Contact {//网页的JS调用App的showcontacts方法&＃xff0c;然后showcontacts内部又去调用JS的show方法&＃64;JavascriptInterfacepublic void showcontacts() {wv_local.post(new Runnable() {&＃64;Overridepublic void run() {wv_local.loadUrl("Javascript:show()");}});}}