Android中与js进行交互

背景

我们在开发Android应用的时候，很多的时候需要跟网页打交道，假如我们现在在做一个外卖app，在app首页会有一个轮询的广告位，我们点击其中一项会跳转至一个wap网页，在这个网页里可能会有几个餐厅的推广信息，在用户点击某个餐厅后，我们希望跳出wap页面展示餐厅的详情，这个时候就需要用到js调用java代码来实现了。再或者，如果我们需要在wap页中进行分享可能也需要用js调用java代码来执行分享的操作。类似这样的场景很多，如果我们需要实现这种功能，就要了解java和js之间的交互的方法。

WebView的使用

我们在Android中如果希望展示一个网页，基本上都会使用WebView这个组件，它的基本使用也很简单，加入我们希望加载一下百度首页，可以像下面这样写：

首先在layout文件中进行声明

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</RelativeLayout>

然后在java文件中使用

WebView webView = (WebView) findViewById(R.id.web_view);
webView.loadUrl("http://www.baidu.com");

同时，WebView还允许我们对一些默认设置进行修改，比如我们希望启动javascript并且可以进行缩放，就需要做如下设置：

// 启用javascript
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setUseWideViewPort(true);

//是否可以缩放
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
getSettings().setDisplayZoomControls(false);
}

但是，如果我们想要在页面加载的时候处理各种通知、请求事件，或者监听页面的加载进度等，就需要用到另外两个类：

WebViewClient

和

WebChromeClient

，

WebViewClient

主要用来监听通知或请求事件的，我们在开发中可能会用到的包含如下几个方法：

onPageStarted

onPageFinished

onReceivedError

shouldOverrideUrlLoading

而

WebChromeClient

则用来处理javascript、网站图标、网站title和加载进度等，我们在使用微信时，如果打开一个网页，会看到它的上面有一条绿色的进度条，这个功能就是通过重写

WebChromeClient

的

onProgressChanged

方法来实现的：

public class CustomWebClient extends WebChromeClient {

@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
mProgressBar.setVisibility(GONE);
} else {
if (mProgressBar.getVisibility() == GONE) {
mProgressBar.setVisibility(VISIBLE);
}
mProgressBar.setProgress(newProgress);
}
super.onProgressChanged(view, newProgress);
}
}

除此之外，WebView还提供了直接运行javascript的功能，例如，我们可以简单的弹出一个对话框：

webView.loadUrl("javascript:alert(\"提示信息！\");");

当然，如果我们想要执行js，那么必须满足两个条件，第一个是在设置中开启javascript支持，即需要调用

setJavascriptEnabled(true)

，第二个是需要设置

WebChromeClient

，两者缺一不可。

WebViewJavascriptBridge设计思路

这个名字听起来有点绕口，其实就是希望能有这么一个中间件，它可以将我们的java请求转化为javascript来执行，同时也可以将javascript的请求转化为java来执行。

根据第二节的介绍，对于第一种情况，也就是通过java来调用javascript代码，系统已经帮我们实现好了，但是第二种情况系统却没有直接提供实现。

尽管如此，我们可以考虑是否能够在

WebViewClient

或

WebChromeClient

中寻得突破口。在

WebViewClient

中存在这样一个方法：

shouldOverrideUrlLoading(WebView view, String url)

，在这个方法的注释中是这样说的：

Give the host application a chance to take over the control when a new url is about to be loaded in the current WebView.

也就是说，对于在WebView中的每个请求，我们都是有机会对其进行拦截的，并且接管本次请求。

我们比较熟悉的是通过一个url来访问页面，比如我们访问美团网，它的一个团购单的url可能是这个样子

http://bj.meituan.com/deal/25709595.html

，而url本身是可以携带一些信息的，上面这个url还不是很明显，如果我们换种写法，你就会看的更清楚些

http://bj.meituan.com/?deal=25709595

当然这个链接并不能正常访问到团购页，这里只是做个示意，也就是我们是可以通过这种param的形式来传递一些数据的。

而我们又可以在

WebViewClient

中对这个请求进行拦截，也就是说我们是能够拿到本次请求的url中所传递过来的数据的，根据这些请求过来的数据，就可以执行本地java代码来处理了，处理完毕后，通过WebView又可以通过回调javascript的方式来返回结果。

以上就是我们实现

WebViewJavascriptBridge

的主要思路了，当然在具体实现的时候会有一些细节，这个我们在下一节具体实现的时候再继续探讨。

总结一下，1、java调用javascript可以直接调用。2、javascript调用java需要用到

WebViewClient

。我们用下图更直观的表示下：

WebViewJavascriptBridge具体实现

我们知道，一个标准的URL的格式应该是下面这个样子：

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

我们在访问页面的时候，用到的最多的协议就是

http

和

https

了，除了这两个协议外，还有

f
4000
ile

、

ftp

等等。这里我们自己来定义一个协议名称，所有javascript调用java的代码都走这个协议。

public class WebViewJsBridgeBase {
private static final String CUSTOM_PROTOCOL_SCHEME = "wvjbscheme";

...

public boolean isCorrectProtocolScheme(String url) {
if (TextUtils.isEmpty(url)) {
return false;
}
return url.startsWith(CUSTOM_PROTOCOL_SCHEME + "://");
}

...
}

这样做的好处就是，我们在对请求进行拦截后，可以更方便的分辩出哪些是需要自己处理的，而对哪些正常的网络请求放行。因此，我们可以定义一个

WebViewClient

的子类，并重写它的

shouldOverrideUrlLoading

方法

public class WebViewJsBridgeClient extends WebViewClient {
private WebViewJsBridgeBase base;
private WebViewClient mWebViewClient;

...

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
try {
url = URLDecoder.decode(url, "UTF-8");
} catch (UnsupportedEncodingException e) {
// do nothing
}

if (base.isCorrectProtocolScheme(url)) {
...
return true;
} else if (mWebViewClient != null) {
return mWebViewClient.shouldOverrideUrlLoading(view, url);
} else {
return super.shouldOverrideUrlLoading(view, url);
}
}
}

首先，我们会去判断是否是我们自定义的协议，如果不是还会判断mWebViewClient是否为空，这里为什么还要定义一个WebViewClient呢？原因也很简单，

WebView

只能设置一个

WebViewClient

，我们这里已经定义了

WebViewClient

如果用户还需要自己定义怎么办呢？所以这里持有一个用户自定义的

WebViewClient

，就可以将一些事件转发出去了：

public class WebViewJsBridgeClient extends WebViewClient {
...

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
if (mWebViewClient != null) {
mWebViewClient.onPageStarted(view, url, favicon);
} else {
super.onPageStarted(view, url, favicon);
}
}

...
}

OK，我们回到Bridge的实现问题上来。在一个页面加载完毕后，如果我们想使用javascript来调用java，那么前期的一些准备工作是必不可少的，因为我们这里说的javascript调用java并不是将javascript代码转化为java执行，而更像是一种曲线救国的方式，因此，至少我们要约定一下，javascript的哪个方法可以调用java对应的哪个方法，也就是我们对其进行一些初始化操作。

我们将java可以处理的每个问题抽象为一个Handler：

public interface WVJBHandler {
void handle(String data, WVJBResponseCallback callback);
}

其中，

WVJBResponseCallback

也是一个接口，当

Handler

处理完毕后就是通过这个

callback

来进行回调给javascript端的：

public interface WVJBResponseCallback {
void callback(String responseData);
}

在我们定义的这两个接口里面，数据是按照String的格式进行传输的，因为javascript天生支持json，因此，对于一些复杂的数据类型，都可以转化为json字符串。

我们的初始化操作就包括注册这些Handler，也就是声明java端可以处理哪些问题，因为会有多个Handler，也就会有多个Callback：

public class WebViewJsBridgeBase {
...
Map<String, WVJBResponseCallback> responseCallbacks;
Map<String, WVJBHandler> messageHandlers;
...
}

public class WebViewJsBridge {
...
public void registerHandler(String handlerName, WVJBHandler handler) {
base.messageHandlers.put(handlerName, handler);
}
...
}

到目前为止，我们一直都是在讲java端的一些实现，那在js端到底要怎么样才能调用我们定义好的Handler呢？

通过上面的介绍，如果希望调用java代码，那么必须发起一个请求，在页面中我们发起请求的方式有几种，最常规的是点击一个链接进行跳转，还可以通过javascript来发起一个ajax请求，除此之外，我们还可以借助

iframe

，就像下面这样：

var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);

我们在原页面里面添加了一个隐藏的

iframe

元素，所有需要跟java交互的请求都是通过改变这个

iframe

的src属性来实现的。

假设说我们现在需要实现一个功能，是在页面里有一个分享按钮，点击这个分享按钮后，打开app自己的分享功能。

第一步，我们需要实现这样一个Handler ，并且将其注册到Bridge中：

bridge.registerHandler("share_handler", new WVJBHandler() {
@Override
public void handle(String data, WVJBResponseCallback callback) {
Log.d("share info from js : ", data);
callback.callback("share success");
}
});

第二步，在js中，我们通过一个

callHandler

方法来请求java代码的执行：

function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
_doSend({ handlerName:handlerName, data:data }, responseCallback);
}

function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message['callbackId'] = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}

可以看到，我们在这里构造了一个Message对象，这个对象包含三个属性，一个是需要java处理的Handler名称，一个是data数据本身，还有是一个回调方法的id，这个回调方法就是java在执行完毕后的回调方法。此外，我们提供了一个Queue来保存这些请求的Message对象，之后通知java有Message进入到队列里面。

第三步，

WebViewClient

对这个请求进行拦截，并到javascript的queue中去取Message：

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
...
if (base.isCorrectProtocolScheme(url)) {
...
if (base.isQueueMessageUrl(url)) {
String javascriptCommand = base.javascriptFetchQueryCommand();
bridge.evaluateJavascript(javascriptCommand);
}
...
return true;
}
...
}

由于在Android中执行javascript后不会反回结果，所以为了拿到Message对象，我们需要将这个Message对象像参数一样附在请求的后面传递给java：

function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
// android 不能直接返回结果,做在放在url中返回
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + RETURN_WITH_MESSAGE + '/' + messageQueueString;
}

这样，这个请求会再次被

WebViewClient

拦截，并解析出Message：

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
...
if (base.isCorrectProtocolScheme(url)) {
...
if (base.isReturnMessageUrl(url)) {
String messageQueueString = base.messageQueueStringFromReturnUrl(url);
base.flushMessageQueue(messageQueueString);
}
...
return true;
}
...
}

在

flushMessageQueue

方法中，主要执行的就是解析Message，并调用对应的Handler来进行处理，在处理完毕后，回调javascript的callback方法返回结果。

到此，java与javascript的一个完整的交互流程就完成了。

更完整的代码可以参考：WebViewJavascriptBridgeForAndroid