WebView与JS交互

冷不防 2023-02-25 10:28 53阅读 0赞

阅读：JSBridge

前言：以下是webView和JS互相调用的基础介绍。

利用WebView调用网页上的JavaScript代码（java调用JS）

说白了，只有一步，就是loadUrl，在WebView中调用Js的基本格式为：

  1. webView.loadUrl("javascript:methodName(parameterValues)");

代码示例，现有以下这段JavaScript代码，将展示3种用法：

  1. <script type="text/javascript">
  2.       function readyToGo() {
  3.           alert("Hello")
  4.       }
  5.       function alertMessage(message) {
  6.       alert(message)
  7.   }
  9.   function getYourCar(){
  10.       return "Car";
  11.   }
  12.   </script>

注意：需要在主线程中发起调用

  1. WebView调用JavaScript无参无返回值函数

    String call = “javascript:readyToGo()”;
    webView.loadUrl(call);

  2. WebView调用JavScript有参无返回值函数

    String call = “javascript:alertMessage(\”” + “content” + “\”)”;
    webView.loadUrl(call);

  3. WebView调用JavaScript有参数有返回值的函数

    @TargetApi(Build.VERSION_CODES.KITKAT)
    private void evaluateJavaScript(WebView webView){

    1.   webView.evaluateJavascript("getYourCar()", new ValueCallback<String>() {
    2.       @Override
    3.       public void onReceiveValue(String s) {
    4.           Log.d("findCar",s);
    5.       }
    6.   });

    }

JavaScript通过WebView调用Java代码（JS调用java）

从API19开始，Android提供了@JavascriptInterface对象注解的方式来建立起Javascript对象和Android原生对象的绑定，提供给JavScript调用的函数必须带有@JavascriptInterface。
实际上，就是3个步骤：
1，@JavascriptInterface注解；
2，注册JavaScriptInterface；
3，调用，如window.android.show(“JavaScript called~!”);

演示一 JavaScript调用Android Toast方法

  1. 编写Java原生方法并用使用@JavascriptInterface注解

    @JavascriptInterface
    public void show(String s){

    1.   Toast.makeText(getApplication(), s, Toast.LENGTH_SHORT).show();

    }

2.注册JavaScriptInterface

  1. webView.addJavascriptInterface(this, "android");

addJavascriptInterface的作用是把this所代表的类映射为JavaScript中的android对象。
3.编写JavaScript代码

  1. function toastClick(){
  2.       window.android.show("JavaScript called~!");
  3.   }
演示二 JavaScript调用有返回值的Java方法

1.定义一个带返回值的Java方法，并使用@JavaInterface：

  1. @JavaInterface
  2.   public String getMessage(){
  3.       return "Hello,boy~";
  4.   }

2.添加JavaScript的映射

  1. webView.addJavaScriptInterface(this,"Android");

3.通过JavaScript调用Java方法

  1. function showHello(){
  2.       var str=window.Android.getMessage();
  3.       console.log(str);
  4.   }

发表评论

表情：
评论列表 （有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

    相关 WebView与JS交互

    阅读：[JSBridge][] 前言：以下是webView和JS互相调用的基础介绍。 利用WebView调用网页上的JavaScript代码（java调用JS） 说白

    冷不防冷不防/ 0 赞/ 54 阅读