服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android中Java和JavaScript交互实例

Android中Java和JavaScript交互实例

2021-03-11 15:42Android开发网 Android

这篇文章主要介绍了Android中Java和JavaScript交互实例,本文给出了实现方法、实现代码、js调用Java、java调用js等内容,需要的朋友可以参考下

Android提供了一个很强大的WebView控件用来处理Web网页，而在网页中，JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。

如何实现

实现Java和js交互十分便捷。通常只需要以下几步。

1.WebView开启JavaScript脚本执行
2.WebView设置供JavaScript调用的交互接口。
3.客户端和网页端编写调用对方的代码。

本例代码

为了便于讲解，先贴出全部代码

Java代码

 

复制代码 代码如下:


package com.example.javajsinteractiondemo;

 

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {
  private static final String LOGTAG = "MainActivity";
  @SuppressLint("JavascriptInterface")
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      final WebView myWebView = (WebView) findViewById(R.id.myWebView);
      WebSettings settings = myWebView.getSettings();
      settings.setJavaScriptEnabled(true);
      myWebView.addJavascriptInterface(new JsInteration(), "control");
      myWebView.setWebChromeClient(new WebChromeClient() {});
      myWebView.setWebViewClient(new WebViewClient() {

          @Override
          public void onPageFinished(WebView view, String url) {
              super.onPageFinished(view, url);
              testMethod(myWebView);
          }
         
      });
      myWebView.loadUrl("file:///android_asset/js_java_interaction.html");
  }
 
  private void testMethod(WebView webView) {
      String call = "javascript:sayHello()";
     
      call = "javascript:alertMessage(\"" + "content" + "\")";
     
      call = "javascript:toastMessage(\"" + "content" + "\")";
     
      call = "javascript:sumToJava(1,2)";
      webView.loadUrl(call);
     
  }
 
  public class JsInteration {
     
      @JavascriptInterface
      public void toastMessage(String message) {
          Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
      }
     
      @JavascriptInterface
      public void onSumResult(int result) {
          Log.i(LOGTAG, "onSumResult result=" + result);
      }
  }

}

 

前端网页代码

 

复制代码 代码如下:


<html>
<script type="text/javascript">
    function sayHello() {
        alert("Hello")
    }

 

    function alertMessage(message) {
        alert(message)
    }

    function toastMessage(message) {
        window.control.toastMessage(message)
    }

    function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
    }
</script>
Java-Javascript Interaction In Android
</html>

 

调用示例

js调用Java

调用格式为window.jsInterfaceName.methodName(parameterValues) 此例中我们使用的是control作为注入接口名称。

 

复制代码 代码如下:


function toastMessage(message) {
  window.control.toastMessage(message)
}

 

function sumToJava(number1, number2){
   window.control.onSumResult(number1 + number2)
}

 

Java调用JS

webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)

调用js无参无返回值函数

 

复制代码 代码如下:

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

 

调用js有参无返回值函数

注意对于字符串作为参数值需要进行转义双引号。

 

复制代码 代码如下:

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

 

调用js有参数有返回值的函数

Android在4.4之前并没有提供直接调用js函数并获取值的方法，所以在此之前，常用的思路是 java调用js方法，js方法执行完毕，再次调用java代码将值返回。

1.Java调用js代码

复制代码 代码如下:

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

 

2.js函数处理，并将结果通过调用java方法返回

复制代码 代码如下:

function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

 

3.Java在回调方法中获取js函数返回值

 

复制代码 代码如下:

@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

 

4.4处理

Android 4.4之后使用evaluateJavascript即可。这里展示一个简单的交互示例 具有返回值的js方法

复制代码 代码如下:

function getGreetings() {
      return 1;
}

 

java代码时用evaluateJavascript方法调用

 

复制代码 代码如下:


private void testEvaluateJavascript(WebView webView) {
  webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {

 

  @Override
  public void onReceiveValue(String value) {
      Log.i(LOGTAG, "onReceiveValue value=" + value);
  }});
}

 

输出结果

 

复制代码 代码如下:

I/MainActivity( 1432): onReceiveValue value=1

 

注意

1.上面限定了结果返回结果为String，对于简单的类型会尝试转换成字符串返回，对于复杂的数据类型，建议以字符串形式的json返回。
2.evaluateJavascript方法必须在UI线程（主线程）调用，因此onReceiveValue也执行在主线程。

疑问解答

Alert无法弹出

你应该是没有设置WebChromeClient,按照以下代码设置

 

复制代码 代码如下:

myWebView.setWebChromeClient(new WebChromeClient() {});
Uncaught ReferenceError: functionName is not defined

 

问题出现原因，网页的js代码没有加载完成，就调用了js方法。解决方法是在网页加载完成之后调用js方法

 

复制代码 代码如下:


myWebView.setWebViewClient(new WebViewClient() {

 

  @Override
  public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);
      //在这里执行你想调用的js函数
  }
 
});

 

Uncaught TypeError: Object [object Object] has no method

安全限制问题

如果只在4.2版本以上的机器出问题，那么就是系统处于安全限制的问题了。Android文档这样说的

复制代码 代码如下:

Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available your web page code (the method must also be public). If you do not provide the annotation, then the method will not accessible by your web page when running on Android 4.2 or higher.


中文大意为

复制代码 代码如下:

警告：如果你的程序目标平台是17或者是更高，你必须要在暴露给网页可调用的方法（这个方法必须是公开的）加上@JavascriptInterface注释。如果你不这样做的话，在4.2以以后的平台上，网页无法访问到你的方法。

 

解决方法

1.将targetSdkVersion设置成17或更高，引入@JavascriptInterface注释
2.自己创建一个注释接口名字为@JavascriptInterface，然后将其引入。注意这个接口不能混淆。这种方式不推荐，大概在4.4之后有问题。

注，创建@JavascriptInterface代码

 

复制代码 代码如下:


public @interface JavascriptInterface {

 

}

 

代码混淆问题

如果在没有混淆的版本运行正常，在混淆后的版本的代码运行错误，并提示Uncaught TypeError: Object [object Object] has no method，那就是你没有做混淆例外处理。 在混淆文件加入类似这样的代码

复制代码 代码如下:

-keep class com.example.javajsinteractiondemo$JsInteration {
    *;
}

 

All WebView methods must be called on the same thread

过滤日志曾发现过这个问题。

复制代码 代码如下:

E/StrictMode( 1546): java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 1) {528712d4} called on Looper (JavaBridge, tid 121) {52b6678c}, FYI main Looper is Looper (main, tid 1) {528712d4})
E/StrictMode( 1546):   at android.webkit.WebView.checkThread(WebView.java:2063)
E/StrictMode( 1546):   at android.webkit.WebView.loadUrl(WebView.java:794)
E/StrictMode( 1546):   at com.xxx.xxxx.xxxx.xxxx.xxxxxxx$JavaScriptInterface.onCanGoBackResult(xxxx.java:96)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.nativeDoRunLoopOnce(Native Method)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.handleMessage(SystemMessageHandler.java:27)
E/StrictMode( 1546):   at android.os.Handler.dispatchMessage(Handler.java:102)
E/StrictMode( 1546):   at android.os.Looper.loop(Looper.java:136)
E/StrictMode( 1546):   at android.os.HandlerThread.run(HandlerThread.java:61)

 

在js调用后的Java回调线程并不是主线程。如打印日志可验证

复制代码 代码如下:

ThreadInfo=Thread[WebViewCoreThread,5,main]

 

解决上述的异常，将webview操作放在主线程中即可。

 

复制代码 代码如下:

webView.post(new Runnable() {
    @Override
    public void run() {
        webView.loadUrl(YOUR_URL).
    }
});
  • JavaScript
  • Java
  • Android

    • 延伸 · 阅读

    精彩推荐
    • AndroidAndroid CardView+ViewPager实现ViewPager翻页动画的方法

      Android CardView+ViewPager实现ViewPager翻页动画的方法

      本篇文章主要介绍了Android CardView+ViewPager实现ViewPager翻页动画的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...

      Abby代黎明9592022-03-02
    • AndroidAndroid界面效果UI开发资料汇总(附资料包)

      Android界面效果UI开发资料汇总(附资料包)

      android ui界面设计，友好的界面会提高用户体验度；同时也增强了android ui界面设计的难度，本文提供了一些常用开发资料(有下载哦)感兴趣的朋友可以了解下...

      Android开发网4652021-01-03
    • AndroidAndroid中AsyncTask详细介绍

      Android中AsyncTask详细介绍

      这篇文章主要介绍了Android中AsyncTask详细介绍,AsyncTask是一个很常用的API,尤其异步处理数据并将数据应用到视图的操作场合,需要的朋友可以参考下...

      Android开发网7432021-03-11
    • AndroidAndroid实现固定屏幕显示的方法

      Android实现固定屏幕显示的方法

      这篇文章主要介绍了Android实现固定屏幕显示的方法,实例分析了Android屏幕固定显示所涉及的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

      鉴客6182021-03-27
    • AndroidAndroid编程解析XML方法详解(SAX,DOM与PULL)

      Android编程解析XML方法详解(SAX,DOM与PULL)

      这篇文章主要介绍了Android编程解析XML方法,结合实例形式详细分析了Android解析XML文件的常用方法与相关实现技巧,需要的朋友可以参考下...

      liuhe68810042021-05-03
    • AndroidAndroid程序设计之AIDL实例详解

      Android程序设计之AIDL实例详解

      这篇文章主要介绍了Android程序设计的AIDL,以一个完整实例的形式较为详细的讲述了AIDL的原理及实现方法,需要的朋友可以参考下...

      Android开发网4622021-03-09
    • Android汇总Android视频录制中常见问题

      汇总Android视频录制中常见问题

      这篇文章主要汇总了Android视频录制中常见问题，帮助大家更好地解决Android视频录制中常见的问题,需要的朋友可以参考下...

      yh_thu5192021-04-28
    • AndroidAndroid实现Service获取当前位置(GPS+基站)的方法

      Android实现Service获取当前位置(GPS+基站)的方法

      这篇文章主要介绍了Android实现Service获取当前位置(GPS+基站)的方法,较为详细的分析了Service基于GPS位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

      Ruthless8332021-03-31
    最近更新
    编辑推荐
    阅读排行
    热门标签
    拉伸效果 　 PopupWindow 　 descendantFocusability 　 Andorid 　 退出程序 　 触屏震动 　 响应接口 　 自定义标题 　 图片居中 　 程序退出 　 binder 　 图片翻转动画 　 横竖屏切换 　 适配 　 dialog 　 preferenceactivity 　 SharedPreferences 　 MultiDex 　 tablelayout 　 RadioGroup 　 颜色编辑器 　 OnCreate 　 ImageView 　 Gallery 　 缩放动画 　 TextView 　 asynctask 　 Notification 　 NotificationManager 　 RelativeLayout 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图