Android和H5的交互

一、应用场景

移动端接入一个H5的文档编辑器。当需要退出编辑页面的时候判断是否需要保存，执行保存操作成功后退出页面，保存失败的话弹窗提示是否重试。这里面需要用到的交互有：

• Android询问H5文档是否有改动
• H5告知Android是否有改动，Android根据告知选择是否显示保存弹窗
• Android调用H5的保存方法
• H5告知Android文档是否保存成功，Android根据告知选择是退出页面还是显示重试弹窗

二、核心功能

需要实现上述功能，落实到代码层面上就是实现：

• Android调用H5的方法
• H5调用Android方法。

三、Android调用H5的方法

Android中调用JS方法：customFunction：

mWebView.loadUrl("javascript:customFunction()");

当然在这之前需要先设置WebView支持JS。

WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);

四、H5调用Android的方法

WebView依旧是提供了相应的方法：

mWebView.addJavascriptInterface(new JsInterface(this), "android");

public class JsInterface {

    private Context mContext;

    public JsInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void passValue(String value) {
        androidText.setText(dataFormat.format(new Date()) + "\n接收到来自H5的信息：" + value);
    }
}

addJavascriptInterface需要Android 4.2以上，它的俩个参数，第一个参数为提供给JS访问的对象，后一个参数为对象暴露在JS中的名称，JS可以使用该名称，访问到这个对象，进而调用对象中的方法。</br>
在暴露给JS的对象中添加了@JavascriptInterface注解的方法，可以直接在JS中被调用。这里也给出JS调用的示例：

<script>
function passValue1(value) {
    window:android.passValue(value);
}
</script>

其中android为addJavascriptInterface方法的第二个参数值，passValue为暴露给JS的对象中添加了@JavascriptInterface注解的方法名。

五、DEMO下载

https://github.com/zhufeng1222/JavascriptDemo