Android using JavaScript in WebView

在 Android 开发中，有时候需要 native 和 HTML5 页面进行交互，有两种方式：其一是给 WebView 添加 Javascript 回调接口，一种是拦截 WebView 的 url 从而达到交互的目的。

Enabling JavaScript

WebView 默认是禁用 JavaScript 的，所以要打开这项设置才能与之交互，方法如下：

1	webView.getSettings().setJavaScriptEnabled(true);

Javascript invoke Java

假设我们现在要实现一个小功能：JavaScript 调用本地代码关掉当前 Activity，怎么做呢？

WebView 设置 JavaScript 接口使用的是方法：

1	webView.addJavascriptInterface(Object object, String name)

第一个参数就是接口类，第二个参数是将这个接口对象插入到 JavaScript 上下文中时对应的名字，JavaScript 就是通过这个名字来调用接口中的方法的。

首先我们来定义这个接口类：

import android.app.Activity;
import android.webkit.JavascriptInterface;
import java.lang.ref.WeakReference;
/**
 * Created by iamwent on 21/02/2017.
 *
 * @author iamwent
 * @since 21/02/2017
 */
public class JSCallback {
    // avoid memory leak
    private final WeakReference<Activity> weak;
    public JSCallback(Activity activity) {
        weak = new WeakReference<>(activity);
    }
    @JavascriptInterface
    public void finish() {
        if (!weak.get().isDestroyed()) {
            weak.get().finish();
        }
    }
}

需要注意的是，出于安全性考虑，在 API 17 及以上，被 @JavascriptInterface 注解的方法才能被调用

然后我们在 WebView 中加载这个接口：

1	webView.addJavascriptInterface(new JSCallback(HomeActivity.this), "native");

在 JavaScript 中的调用就很简单了：

1	window.native.finish()

window 是 JavaScript 默认的一个全局对象，native 是我们传递进去的名字，你也可以改成其他的。

为了避免内存泄漏，我们可以在合适的位置（如：onDestroy()）调用以下方法：
1
webView.removeJavascriptInterface("native");

另外一种方式呢，就是 native 拦截 webview 的 url，方法如下：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if (request.getUrl().getScheme().equals("native")) {
            // todo
            return true;
        }
        return super.shouldOverrideUrlLoading(view, request);
    }
});

Java invoke JavaScript

native 调用 JavaScript 也有两种方式，其一是使用 webView.loadUrl("javascript:method(params)，method 是定义在 JavaScript 中的函数。

1 2	// 没有返回值，需要 JavaScript 再调用 native 方法 webView.loadUrl("javascript:todo()");

在 Android 4.4 及其以上版本中， WebView 中提供了一个叫做 evaluateJavascript() 的方法，可以用来异步执行 JavaScript 代码，并且这个方法需要在主线程中调用。

// 在主线程中调用，异步执行
String script = "";
webView.evaluateJavascript(script, new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // todo
    }
});

demo 就不写了，很简单的啦。

Android using JavaScript in WebView

Enabling JavaScript

Javascript invoke Java

Java invoke JavaScript

Reading More