zoukankan      html  css  js  c++  java
  • 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端获取字符串

  • 相关阅读:
    扫面线模板
    (动态规划、栈)leetcode 84. Largest Rectangle in Histogram, 85. Maximal Rectangle
    tmux 常见命令汇总
    leetcode 221
    leetcode 319 29
    (贪心)leetcode 392. Is Subsequence, 771. Jewels and Stones, 463. Island Perimeter
    leetcode 982 668
    Python import 同文件夹下的py文件的函数,pycharm报错
    Windows里Anaconda-Navigator无法打开的解决方案
    Windows下 gpu版 Tensorflow 安装
  • 原文地址:https://www.cnblogs.com/fengfenghuifei/p/8350883.html
Copyright © 2011-2022 走看看