java与js交互，相互调用传参

最新推荐文章于 2024-06-09 08:00:00 发布

NicholasYzd

最新推荐文章于 2024-06-09 08:00:00 发布

阅读量1.3w

点赞数 3

文章标签： js-java交互 native+h5 js-java调用 javascript android-js

本文链接：https://blog.csdn.net/qq_27942511/article/details/70738986

版权

前言

随着前端技术的发展与H5的广泛使用，移动端采用native+h5的方式越来越多了，对于Android来说就涉及到java与js的交互，相互调用传参等。下面就来看一下java与js交互的简单demo。

方式

实现js调用java有四种方式：

1.JavascriptInterface

2.WebViewClient.shouldOverrideUrlLoading()

3.WebChromeClient.onConsoleMessage()

4.WebChromeClient.onJsPrompt()

JavascriptInterface
这种方式是Android官方提供的Javascript与Native通信的解决方案。

java中创建接口

public class DemoInteface {
    @android.webkit.JavascriptInterface
    public void fromJs(String toast) {
        Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
    }
}

将接口添加到WebView中

webView = (WebView) findViewById(R.id.wb);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/test.html");
webView.addJavascriptInterface(new DemoInteface(), "demo");

将接口添加到WebView中

<body>

    <a href="javascript:;" class="m-btn" onclick="showToast('js的问候送达')">Toast</a>

    <script language="javascript">

        function showToast(toast) {
            javascript:demo.fromJs(toast);
        };

    </script>
</body>

注意js中的javascript:demo.fromJs(toast); 其中类名（dmeo）要与 webView.addJavascriptInterface(new DemoInteface(), “demo”);中第二个参数一致，方法名要与接口中方法的名称一致

这里写图片描述

WebViewClient.shouldOverrideUrlLoading()
这个方法是拦截webview中所有的url跳转，根据url来判断是否拦截，来执行不同的操作

java代码

public class CustomWebViewClient extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (url.contains("toast")) {
                Log.e("yue", url);
                Toast.makeText(MainActivity.this, "拦截成功了", Toast.LENGTH_SHORT).show();
                return true;
            }
            return super.shouldOverrideUrlLoading(view, url);
        }
   }



webView.setWebViewClient(new CustomWebViewClient());

js代码

<a href="https://www.baidu.com/?=toast" class="m-btn">Toast2</a>

这里写图片描述

WebChromeClient.onConsoleMessage()
这是Android提供给Javascript调试在Native代码里面打印日志信息的API。

java

public class CustomWebChromeClient extends WebChromeClient {

        @Override
        public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
            super.onConsoleMessage(consoleMessage);
            String msg = consoleMessage.message();//Javascript输入的Log内容
            Log.d("fromjs",msg);
            return true;
        }
  }

webView.setWebChromeClient(new CustomWebChromeClient());

js代码

<a href="javascript:;" class="m-btn" onclick="log()">log</a>


function log(){
    console.log('log info from js');
}

这里写图片描述

WebChromeClient.onJsPrompt()
除了WebChromeClient.onJsPrompt()，还有WebChromeClient.onJsAlert()和WebChromeClient.onJsConfirm()。顾名思义，这三个Javascript给Native代码的回调接口的作用分别是提示展示提示信息，展示警告信息和展示确认信息。因为极少会用这几种，所以这里就不多做介绍

实现java调用js：

上面说了js调用java有很多方式，常用也是官方推荐的就是前两种，而java调用js就只有一种方式，WebView.loadUrl()，androi 4.4（api 19）以上出现了WebView.evaluateJavascript()来代替loadUrl。

java代码

 button.setOnClickListener(new View.OnClickListener() {
     @Override
      public void onClick(View v) {
          if (android.os.Build.VERSION.SDK_INT >= 19) {
              webView.evaluateJavascript("javascript:wave()", null);
          } else {
              webView.loadUrl("javascript:wave('')");
          }
      }
  });

js代码

 var flag = false;
 function wave() {
     if(!flag){
         flag = true;
         document.getElementById("droid").src="testb.png";
     }else{
         flag = false;
         document.getElementById("droid").src="testa.png";
     }

 }

这里写图片描述

以上就是一些简单的js与java的交互。要想实现复杂的交互逻辑，可以使用jsBridge这一第三方框架，吓篇博客讲会介绍这一框架的使用及原理。

代码下载： http://download.csdn.net/detail/qq_27942511/9832172

NicholasYzd

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
java与js交互，相互调用传参

前言随着前端技术的发展与H5的广泛使用，移动端采用native+h5的方式越来越多了，对于Android来说就涉及到java与js的交互，相互调用传参等。下面就来看一下java与js交互的简单demo。方式实现js调用java有四种方式：1.JavascriptInterface2.WebViewClient.shouldOverrideUrlLoading()3.WebChromeClient.o
复制链接

扫一扫