Android WebView与H5前端JS交互

H5网页图

我们开发过程中，为了工作需要会用到Android与H5混合开发。混合开发就是一部分功能用原生开发，另外一部分原生的功能改为Html 5来开发。单纯的数据展示，我们可以采用WebView来渲染展示，但有时候可能会用到WebView与Javascript数据交互的情况，那么下面我们就来讲解一下两者之间如何互相调用交互的。

---

Android与JS是通过WebView交互，实际上就是：

1. Android调用JS代码
2. JS调用Android代码

前提，网络权限，WebView和webSettings配置，调用setJavaScriptEnabled(true);支持JS脚本

WebView webView = (WebView) findViewById(R.id.webview);  
WebSettings webSettings = webView.getSettings();  
webSettings.setJavaScriptEnabled(true);  //开启js  
...

1. Android调用JS代码

• 调用JS无参无返回值方法

android代码：

//加载完页面之后的处理
@Override
public void onPageFinished(WebView view, String url) {
    //网页加载完之后，android调用js方法
    webView.loadUrl("javascript:showFromAndroid()");
    super.onPageFinished(view, url);
}
...

js代码：

  
 
...
function showFromAndroid() {        
    alert("Android调用Js");  
}
...
 

• 调用JS有参无返回值方法

android代码：

//加载完页面之后的处理
@Override
public void onPageFinished(WebView view, String url) {
    //网页加载完之后，android调用js方法
    String msg ="展示内容";
    webView.loadUrl("javascript:showFromAndroid('"+msg+"')");
    super.onPageFinished(view, url);
}
...

js代码：

  
 
...
function showFromAndroid(param) {   
      alert("Android调用Js"+param);  
}
...
 

• 调用JS有参有返回值方法

android代码：

@Override
public void onPageFinished(WebView view, String url) {
    //网页加载完之后，android调用js方法
    mWebView.evaluateJavascript（"javascript:showFromAndroid()", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

js代码：

  
 
...
function showFromAndroid(param) {
    return "Android调用Js"+param;  
}
...
 

2. JS调用Android代码

(1) 定义一个交互的类，@JavascriptInterface注解

public class AndroidForJs {
    private Context context;

    public AndroidForJs(Context context) {
        this.context = context;
    }

    //api17以后，只有public且添加了 @JavascriptInterface 注解的方法才能被调用
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(context, "js调用android showToast():" + toast, Toast.LENGTH_SHORT).show();
    }

}

(2) 注册JavaScriptInterface接口，JS绑定

webView.addJavascriptInterface(new AndroidForJs(this),"AndroidView");  

(3) 方法调用，例如：window.AndroidView.show("JS called~");

  
 
...
function showAndroidToast(toast) {
    window.AndroidView.showToast(toast);
}
...