WebView与JS交互

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

阅读：[JSBridge][]

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

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

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

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

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

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

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

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

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

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

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

@TargetApi(Build.VERSION_CODES.KITKAT)
      private void evaluateJavaScript(WebView webView){
          webView.evaluateJavascript("getYourCar()", new ValueCallback<String>() {
              @Override
              public void onReceiveValue(String s) {
                  Log.d("findCar",s);
              }
          });
      }

#### 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){
          Toast.makeText(getApplication(), s, Toast.LENGTH_SHORT).show();
      }

2.注册JavaScriptInterface

webView.addJavascriptInterface(this, "android");

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

function toastClick(){
          window.android.show("JavaScript called~!");
      }

###### 演示二 JavaScript调用有返回值的Java方法 ######

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

@JavaInterface
      public String getMessage(){
          return "Hello,boy~";
      }

2.添加JavaScript的映射

webView.addJavaScriptInterface(this,"Android");