一、理论概述
1.js调用java方法
直接调用WebView的该方法就可以添加接口了,不过先要启动交互
- // 启用javascript
- mWebView.getSettings().setJavaScriptEnabled(true);
- // 添加js交互接口
- public void addJavascriptInterface (Object object, String name)
object是js调用java类的对象，name是对象的别名，在js中可以用这个别名+点语法+方法名就可以调用本地的方法。
注意：被js调用的方法不可以定义成私有的，不然js就不能调用
2.java调用js方法
直接通过webView.loadUrl("javascript:jsFun('" + msg + "')")就行了.
假设js中有一个方法叫jsFun(msg)，则这样就完成了调用
// 调用js中的函数：jsFun(msg)
webView.loadUrl("javascript:jsFun('" + msg + "')");
二、消息处理
1、遇到Uncaught ReferenceError:...错误
出现该错误不会崩溃，它的意思是java调用js时没有找到调用的方法。万一我们调用的方法不存在，需要做相应的处理怎么办？尝试try ... catch ...抓取一下异常，发现什么都没有抓到...后来仔细看了一下错误Log的TAG，是Web Console，于是看了一下官方文档，终于发现了这么一个方法：
- mWebview.setWebChromeClient(new WebChromeClient() {
- @Override
- public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
- // TODO Auto-generated method stub
- if (consoleMessage.message().contains("Uncaught ReferenceError")) {
- // do something...
- }
- return super.onConsoleMessage(consoleMessage);
- }
- });
这个方法可以监听WebView的控制台消息，然后判断一下消息是否包含“Uncaught ReferenceError”就可以捕获该消息了
2、获取js方法的返回值
仔细观察会发现WebView的loadUrl方法是没有返回值的，那要是想要获取js方法的返回值就该怎么做呢？查了一些资料，发现网上也没有很好的解决办法，后来只能通过回调的方法来实现返回，虽然很不灵活，不过也没有办法...
在loadUrl调用JS的一个方法，然后JS执行方法的时候，再调用Android本地的一个方法，并把返回值作为参数传递下来。
二、例子
1.Android java代码
//java代码
package com.wytiger.jsdemo;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.Toast;
/**
* Android WebView 与 Javascript 交互。
*/
public class JsActivity extends Activity {
private WebView webView;
@SuppressLint({ "SetJavaScriptEnabled", "AddJavascriptInterface" })
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_js2);
webView = (WebView) findViewById(R.id.webView);
webView.setVerticalScrollbarOverlay(true);
String uri = "file:///android_asset/js_test2.html";
webView.loadUrl(uri);
// 添加客户端支持
webView.setWebChromeClient(new WebChromeClient());
// 设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);
// 添加js交互接口
webView.addJavascriptInterface(new MyJava(this), "javaObject");
}
private class MyJava {
private Context mContext;
public MyJava(Context context) {
this.mContext = context;
}
// 在js中调用window.javaObject.javaFun(name)，便会触发此方法。
// api17版本以上加上注解
@JavascriptInterface
public void javaFun(String name) {
Toast.makeText(mContext, "我是java方法，被js调用，js传递过来的参数是："+name,
Toast.LENGTH_LONG).show();
}
}
// 在java中调用js代码
public void callJs(View view) {
String msg = ((EditText) findViewById(R.id.input_et)).getText()
.toString();
// 调用js中的函数：jsFun(msg)
webView.loadUrl("javascript:jsFun('" + msg + "')");
}
}
//布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:padding="8dp"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/input_et"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:layout_weight="1"
android:hint="请输入信息" />
<Button
android:text="Java调用js"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="callJs" />
</LinearLayout>
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
2.H5 js代码，将此html文件放入assets文件夹即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>测试Android与H5交互（java与js的交互）</title>
<head>
<style>
body {background-color:#e6e6e6}
.rect
{
color:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
width:100px;
padding:6px;
background-color:#98bf21;
text-decoration:none;
text-align:center;
border:none;
cursor:pointer;
}
.inputStyle {font-size:16px;padding:6px}
</style>
</head>
<body>
<p>这是html页面</p>
<input id = "name_input" class = "inputStyle" type="text"/>
<a class = "rect" onclick="sendInfoToJava()">js调用Java</a>
<script>
function sendInfoToJava(){
//js调用java方法，并传递参数
var value = document.getElementById("name_input").value;
window.javaObject.javaFun(value);
}
//在java中调用此方法
function jsFun(msg){
alert("我是js方法，被java调用，传递过来的参数是："+msg);
}
</script>
</body>
</html>