WebView与JavaScript的交互

一、原生方法

https://www.jianshu.com/p/5cc2eae14e07

1、JS端调用Android端代码有3种方法：

（1）通过WebView的addJavascriptInterface()进行对象映射。
（2）通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url。
（3）通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息。

2、通过WebView的addJavascriptInterface()进行对象映射

webview在loadurl之前注册一个对象，可以在这个对象里封装h5所需要的参数，至于h5什么时候调用这个对象h5自己决定，解决了webview加载完页面才能往js注入传值的问题。

Android端：

public class AndroidToJS {

    // 定义JS需要调用的方法
    // 被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void callAndroid(String msg){
        Log.e("zw","JS调用了Android的callAndroid()，msg : " + msg);
    }
}

h5端：

//JS调用Android原生方法
function callAndroid(){
    // 由于对象映射，所以调用android对象等于调用Android映射的对象
    android.callAndroid("js调用了");
}

二、第三方框架

iOS WebViewJavascriptBridge
Android JsBridge

//判断安卓
const isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1;
//判断iOS
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
  // 'scan'为标志符 app定义   ，data 为传过去app的值
   window.WebViewJavascriptBridge.callHandler( 'scan', data
   function(responseData) {});
}else if (isIOS) {
    //ios如果不需要传值 则data要传null
   window.webkit.messageHandlers.scan.postMessage(data)
}