Android中Java和JavaScript交互
- - 极客521 | 极客521Android提供了一个很强大的WebView控件用来处理Web网页，而在网页中，JavaScript又是一个很举足轻重的脚本. 本文将介绍如何实现Java代码和Javascript代码的相互调用. 实现Java和js交互十分便捷. WebView开启JavaScript脚本执行. WebView设置供JavaScript调用的交互接口.
Android中Java和JavaScript交互
标签：
General
| 发表时间：2014-12-13 08:00 | 作者：ajaxj
出处：http://www.geek521.com
Android提供了一个很强大的WebView控件用来处理Web网页，而在网页中，JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。
如何实现
实现Java和js交互十分便捷。通常只需要以下几步。
- WebView开启JavaScript脚本执行
- WebView设置供JavaScript调用的交互接口。
- 客户端和网页端编写调用对方的代码。
本例代码
为了便于讲解，先贴出全部代码
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
注意
- 上面限定了结果返回结果为String，对于简单的类型会尝试转换成字符串返回，对于复杂的数据类型，建议以字符串形式的json返回。
- 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以以后的平台上，网页无法访问到你的方法。
两种解决方法
- 将targetSdkVersion设置成17或更高，引入@JavascriptInterface注释
- 自己创建一个注释接口名字为@JavascriptInterface，然后将其引入。注意这个接口不能混淆。
注，创建@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).
}
});
相关 [android java javascript] 推荐：
Rhino -- 基于java的javascript实现
- - 编程语言 - ITeye博客这几天突然对js引擎非常感兴趣，大概了解了一下，记下来备忘. javascript引擎大家比较熟悉的应该是当前比较火的Chrome V8引擎. 另外一个是 基于java的Rhino引擎，这个想来大家不是很了解. Rhino 是一种使用 Java 语言编写的 JavaScript 的开源实现，原先由Mozilla开发，现在被集成进入JDK 6.0.
Android WebView中的JavaScript代码使用
- - 博客园_首页 上一篇博文： Android WebView使用基础已经说了一些Android中WebView的基本使用. 本篇文章主要介绍WebView中的JavaScript代码的执行相关，已经JS代码与Android代码的互相调用. （因为本人对Web开发并不是很熟悉，所以如果有哪些地方说得不对，还请指正.
Java/Android编码规范
- - CSDN博客推荐文章1. 为什么需要编码规范?. 编码规范对于程序员而言尤为重要，有以下几个原因：. l 一个软件的生命周期中，80%的花费在于维护. l 几乎没有任何一个软件，在其整个生命周期中，均由最初的开发人员来维护. l 编码规范可以改善软件的可读性，可以让程序员尽快而彻底地理解新的代码.
Atmosphere 1.0：支持Java/JavaScript的异步通信框架
- - InfoQ cnAtmosphere 1.0是一个新的Java/Scala/Groovy框架，它试图将Web浏览器与应用服务器之间的通信抽象出来. 在Web Socket、HTML5服务器端事件和其他特定于应用服务器的解决方案可用时，该框架可以透明地支持，此外还可将长轮询作为一种备选方案. 最初，Web应用程序是采用客户端/服务器模型构建的，始终由客户端向服务器发起连接.
android 或者java SAX解析XML
- - ITeye博客本实例解析xml使用的是继承DefaultHandler类，此类就是java中封装好的xml解析器类，下面看代码详细说明：. 第一步：首先说明下xml文件，Java Sax解析是按照xml文件的顺序一步一步的来解析，在解析xml文件之前，我们要先了解xml文件的节点的种类，一种是ElementNode，一种是TextNode.
在Android上实现Java和Js交互
- - ITeye博客 其实webview加载资源的速度并不慢，但是如果资源多了，当然就很慢. 图片、 css 、 js 、 html 这些资源每个大概需要 10-200ms ，一般都是 30ms 就 ok 了. 不过webview是必须等到全部资源都完成加载，才会进行渲染的，所以加载的速度很重要. 从Google上我们了解到，webview 加载页面的顺序是：先加载 html ，然后从里面解析出 css 、 js 文件和页面上的图片资源进行加载.
Android Java层的anti-hooking技巧
- - WooYun知识库原文： http://d3adend.org/blog/?p=589. 一个最近关于检测native hook框架的方法让我开始思考一个Android应用如何在Java层检测Cydia Substrate或者Xposed框架. 下文所有的anti-hooking技巧很容易就可以被有经验的逆向人员绕过，这里只是展示几个检测的方法.
android 使用html5作布局文件: webview跟javascript交互
- - 移动开发 - ITeye博客android 使用html5作布局文件 http://www.cnblogs.com/andgoo/archive/2011/10/11/2207936.html. Android中webview跟JAVASCRIPT中的交互 http://www.oschina.net/question/4873_27156.
用JavaScript编写一个Java虚拟机？谈谈哗众取宠的BicaVM
- mazhechao - cnBeta.COM今日目睹某网络新闻，开篇明义便包含如下几行文字【程序员Artur Ventura，这位超级大牛，用JavaScript写了一个java虚拟机BicaVM】. 继而再读，惊见其中“超级大牛”、“神人”等溢美之词不绝于耳，崇拜、神往之心溢于言表. 仿佛BicaVM就是天上有地下无的创举，仿佛Artur
Ventura就是继比尔盖茨，乔布斯之后的第三位IT业领军人.