android与js交互系列文章(二) - android 调用 js

1. android 调用 js 方式

android 调用 js 有 3种方法:
1>:4.4以下:通过 webview 的 loadUrl("javascript:sum(6,6)") ;
2>:4.4以上:通过 webview 的 evaluateJavascript("sumn(6,11)") ;
3>:推荐使用混合方式:判断版本4.4以下、4.4以上;

2. 方式1需要注意的问题:

1>:new JsInterface():这个是自己创建的一个类;
2>:android:是随便给 new JsInterface()起的一个别名,是要在 js中写的一个别名;
3>:onSum():是要调用的 js中的方法名;
所以 android要与js 商议好 别名和方法名;

3. 具体实现方式如下:

1>:ll.html代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
      <meta http-equiv="description" content="this is my page">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">  

        function funFromjs(){
            document.getElementById("helloweb").innerHTML="div显示数据,无参数";
        }
        function funJs(msg){
            document.getElementById("hello2").innerHTML=msg;
         }


        <!-- 以下是android调用js的2种方法:-->

        <!-- 方法1:通过webview的loadUrl("javascript:sum(6,6)")  -->
        function sum(i,m){
           var result = i+m;
           document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result;
           javascript:android.onSum(result)
        }


        <!-- 方法2:通过webview的 evaluateJavascript("sumn(6,11)")  -->
        function sumn(i,m){
           var result = i*m; 
           document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
           return result;
        } 


       /**
            结算方法
        */

        <!-- js调用android方法  start-->

       function showToast(toast) { 
            var money=toast*3;
            javascript:android.showToast(money);
        }

        <!-- js调用android方法  end-->


    
    </script> 

    <style type="text/css">
        input{
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        
    </style>

</head>

<body>
        
     <input type="button" value="结算" onclick="showToast('12')">
       <div id="helloweb"> 

      </div>
      <div id="hello2"> 

      </div>
      <div id="h"> 

      </div>
       <div id="hh"> 

      </div>
     
</body>
</html>

2>:android调用js的3种方法如下:

/**
 * Email: 2185134304@qq.com
 * Created by Novate 2018/6/29 11:11
 * Version 1.0
 * Params:
 * Description:    Android 调用 js代码中的方法:有3种方式:
 *
 *                  方式一:4.4以下:通过 webview 的 loadUrl("javascript:sum(6,6)") ;
 *                  方式二:4.4以上:通过 webview 的 evaluateJavascript("sumn(6,11)")  ;
 *                  方式三:推荐使用混合方式:判断版本4.4以下、4.4以上;
 *
*/

public class Android2JsActivity extends AppCompatActivity {

    private WebView web_view;


    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_android2js);

        initView() ;
    }


    private void initView() {
        web_view = (WebView) findViewById(R.id.web_view);
        // 隐藏 webview
        /*ViewCompat.setAlpha(web_view,0);//修改透明度为最低值
        web_view.setVisibility(View.INVISIBLE);*/
        // 获取WebView的设置
        WebSettings webSettings = web_view.getSettings();
        //设置编码
        webSettings.setDefaultTextEncodingName("utf-8");
        //设置背景颜色 透明
        web_view.setBackgroundColor(Color.argb(0, 0, 0, 0));
        // 将JavaScript设置为可用,这一句话是必须的,不然所做一切都是徒劳的
        webSettings.setJavaScriptEnabled(true);
        // 通过webview加载html页面
        web_view.loadUrl("file:///android_asset/ll.html");



        /************** android调用js方法一:通过WebView的loadUrl() start *************/

        // JsInterface是自己创建的类;
        // android是给JsInterface这个类随便取一个名字,
        // 但是必须和html代码中 javascript:android.onSum(result)、javascript:android.showToast(money); 的 android 一样,是同一个名字
        web_view.addJavascriptInterface(new JsInterface() , "android");
    }

    public class JsInterface{
        // Android 调用 Js 方法1 中的返回值
        @JavascriptInterface
        public void onSum(int result){
            Toast.makeText(Android2JsActivity.this , "Android调用Js方法有返回值,返回结果是 -> " + result , Toast.LENGTH_SHORT).show();
        }
    }


    /**
     * 方法一:
     */
    public void btn_1(View view){
        web_view.loadUrl("javascript:sum(6,6)");
    }


    /************** android调用js方法一:通过WebView的loadUrl() end *************/




    /************** android调用js方法二:通过WebView的evaluateJavascript() start *************/
    /**
     * 方法二:
     * Android 调用 Js中的方法,并且有返回值
     *    Android4.4 之后 直接调用evaluateJavascript方法即可
     */
    public void btn_2(View view){
        web_view.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Toast.makeText(Android2JsActivity.this, "返回值" + value, Toast.LENGTH_SHORT).show();
            }
        });
    }

    /************** android调用js方法二:通过WebView的evaluateJavascript() end *************/




    /************** android调用js方法三:推荐使用混合方式,判断4.4以上、4.4以下 start *************/

    public void btn_3(View view){
        // Android版本变量
        final int version = Build.VERSION.SDK_INT;
        // 因为该方法在 Android 4.4 版本才可使用,所以使用时需进行版本判断
        if (version < 18) {
            web_view.loadUrl("javascript:callJS()");
        } else {
            web_view.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    //此处为 js 返回的结果
                }
            });
        }
    }
    /************** android调用js方法三:推荐使用混合方式,判断4.4以上、4.4以下 end *************/

}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容