Android 和 JS交互方法初探

起初有个需求，就是需要监听网页的图片点击，然后图片单独跳转到另一个页面单独显示

这里就需要用JS和Android Native方法之间的通信　　

先说上面的解决办法之前先引出两个Android的方法

1： addJavascriptInterface(Object obj, String interfaceName) 

2：evaluateJavascript(String script, ValueCallback<String> resultCallback) 

这个是两个webview和js代码交互的非常重要的方法

1：第一个 方法：这个方法是往webview里加入一个可使用的native的接口类，js代码里可以直接调用声明了@JavascriptInterface的方法，以此就可以在js网页代码里调用native方法了，比如你可以再js里点击一个button打开一个AndroidNative的Dialog。

上代码解释下，比如这个@JavascriptInterface方法，方法写在了一个总类里

private final class Client {

        @JavascriptInterface
        public void showMsgFromAndroid(String msg) {  //如要返回值可把void改为String等等类型
            AlertDialog.Builder builder = new AlertDialog.Builder(ScriptActivity.this);
            builder.setTitle("来自安卓的对话框").setMessage(msg);
            builder.create().show();
        }
    }

然后webview使用呢？

这样------>

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

这样你就可以在h5代码里用js 直接使用client（注意是client，我感觉就相当于一个实例好的对象名字传给了js代码吧），这样在我们的h5代码里使用

<script type="text/javascript">
   function showAndroidDialog(){
       client.showMsgFromAndroid("网页要求安卓弹窗");
   }
</script>

<button onclick="javascript:showAndroidDialog()"><font size='5'>让android弹窗</font></button><br>

这样就实现了在h5的js里调用native方法。addJavascriptInterface(Object obj, String interfaceName) 就是这个用法

2：第二个方法：evaluateJavascript 我理解的就是从js里接收一个字符串回调，第一个是h5 的js代码里的js方法函数名，第二个是需在native方法里实现的回调

也就是我js想返回一个string给native就可以在js里写一个有string返回值的函数，然后在Native里监听此返回，js如下

<script type="text/javascript">

   function getMsgFromWeb(){
      return "这是网页返回的字符串";
   }

</script>

java代码里

webview.evaluateJavascript("getMsgFromWeb()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        AlertDialog.Builder builder = new AlertDialog.Builder(ScriptActivity.this);
                        builder.setTitle("来自安卓的对话框").setMessage(UnicodeToString(value));
                        builder.create().show();
                    }
                });

这样就完成了，native从js里接收消息。

3：那么还有一个问题，怎么通过native方法让js弹窗出来呢，我们实现了js让Android弹窗，js返回数据给native，那么怎么让js弹窗呢，就是h5自己对话框，其实很简单，直接调用

webview.loadUrl("javascript:showMsgFromWeb()");

loadUrl除了是读取一个网页之外，loadUrl还可以直接调用js端的一个方法，这样就可以直接调用alert让网页弹窗出来了

<script type="text/javascript">

   function showMsgFromWeb(){
      alert("这是网页弹出的对话框");
   }
    
</script>

4：还有一个是如何让Android方法传字符串给Js呢，其实答案就在第一个方法里面，里面有个client，我们可以写一个有String返回的方法，然后直接在Js里调用client.xxx方法，然后就可以获得此String字符串了

java的方法

    private final class Client {

        @JavascriptInterface
        public String getMsgFromAndroid(String msg) {
            return "这是Android返回的字符串："+msg;
        }
    
    }

js方法

   function showMsgInAndroid(){
      var result = client.getMsgFromAndroid("这是网页给的参数");
      alert(result);
   }

这样就完成了从Android native端获取字符串