WebView与JS交互

阅读:JSBridge

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

利用WebView调用网页上的JavaScript代码(java调用JS)

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

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

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

<script type="text/javascript">
      function readyToGo() {
          alert("Hello")
      }
      function alertMessage(message) {
      alert(message)
  }

  function getYourCar(){
      return "Car";
  }
  </script>

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

  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");

3.通过JavaScript调用Java方法

  function showHello(){
      var str=window.Android.getMessage();
      console.log(str);
  }
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值