WebView与JavaScript的交互总结

1、交互总结

WebView与JS之间的交互总结可以概括为下面两种：

Android客户端去调用JS代码
JS端去调用Android原生代码

它们之间互相调用的桥梁是WebView。

2、交互前准备

2.1 Android客户端代码

Activity：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    webView = findViewById(R.id.web_view);
    //android调用JS代码的Button
    btnAndroidCallJS = findViewById(R.id.btn_call_js);

    //防止外部浏览器调用此链接
    webView.setWebViewClient(new WebViewClient());

    WebSettings settings = webView.getSettings();
    //允许WebView使用JS
    settings.setJavaScriptEnabled(true);
    //支持通过JS打开新窗口(允许JS弹窗)
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
}

XML：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container"
    tools:context="com.zw.plugins.MainActivity">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/btn_call_js"
        android:id="@+id/web_view"></WebView>

    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/btn_call_js"
        android:text="Android调用JS"
        app:layout_constraintTop_toBottomOf="@id/web_view"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</android.support.constraint.ConstraintLayout>

2.2 JS端代码

test.html：

<head>

</head>

<body>
    <h1 onClick='callAndroid()'>这是JS调用原生1</h1>
    <h1 onClick='callAndroid2()'>这是JS调用原生2</h1>
    <h1 onClick='callAndroid3()'>这是JS调用原生3</h1>

    <Script>
        //Android原生调用JS方法
        function callJS(){
            alert("Android调用了JS的callJS方法");
            return "Android调用了JS的callJS()"
        }

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

        //JS调用通过shouldOverrideUrlLoading()调用Android原生方法
        function callAndroid2(){
            //document.location代表当前页面的url
            document.location = "js://webview?arg1=111&arg2=222"
        }

        //JS调用通过prompt()调用Android原生方法
        function callAndroid3(){
            var result = prompt("js://webview?arg1=111");

            alert(result);
        }

    </Script>
</body>

3、Android端调用JS代码

3.1 Android端调用JS代码有2种方法：

通过WebView的loadUrl()
通过WebView的evaluateJavascript()

这两种方式调用JS代码时，格式都是以javascript:开头的，后面接JavaScript的方法名。

3.2 通过WebView的`loadUrl()`

    //Android调用JS代码
    btnAndroidCallJS.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            webView.loadUrl("javascript:callJS()");
        }
    });

**注意：**JS代码调用一定要在WebViewClient的onPageFinished()回调之后才能调用，否则不会调用。

3.3 通过WebView的`evaluateJavascript()`

//Android调用JS代码
btnAndroidCallJS.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String s) {
                //s是JS方法的返回值
                Log.e("zw",s); //这里s是“Android调用了JS的callJS()”
            }
        });
    }
});

这种方式比第一种方式效率高（执行时不会刷新页面），同时可以获取返回值。缺点是只兼容到Android4.4版本以后。

4、JS端调用Android端代码

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

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

3.2 通过WebView的`addJavascriptInterface()`进行对象映射

3.2.1 先定义一个和JS映射的对象

public class AndroidToJS {

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

3.2.2 JavaScript内需要有Android调用原生的方法

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

3.2.3 Android原生调用JavaScript方法

// 通过addJavascriptInterface()将Java对象映射到JS对象
//参数1：Javascript对象名
//参数2：Java对象名
webView.addJavascriptInterface(new AndroidToJS(),"android");

结果：

E/zw: JS调用了Android的callAndroid()，msg : js调用了

这种方法优点是使用简单，缺点是存在严重的漏洞问题，请看文章：你不知道的 Android WebView 使用漏洞

3.3 通过`WebViewClient`的`shouldOverrideUrlLoading()`方法回调拦截url

3.3.1 先约定好调用的URL协议

比如以js://webview?arg1=111开头。

3.3.2 在JS中定义调用方法

//JS调用通过shouldOverrideUrlLoading()调用Android原生方法
function callAndroid2(){
    //document.location代表当前页面的url
    document.location = "js://webview?arg1=111&arg2=222"
}

3.3.3 Android端的WebView设置`WebViewClient`对URL进行拦截

最好重写两个shouldOverrideUrlLoading()方法，避免其中一个不生效。

webView.setWebViewClient(new WebViewClient(){

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            Log.e("ll", url );
            if(url.startsWith("js")){
                if(url.contains("webview")){
                    Toast.makeText(getApplicationContext(),"heihei",Toast.LENGTH_SHORT).show();
                    return true;
                }
            }
            return super.shouldOverrideUrlLoading(view, url);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            Uri uri = request.getUrl();

            Log.e("ll", uri.getScheme() + " , " + uri.getAuthority() + " , ");
            if("js".equals(uri.getScheme())){

                if("webview".equals(uri.getAuthority())){
                    Toast.makeText(getApplicationContext(),"heihei",Toast.LENGTH_SHORT).show();
                    return true;
                }
            }

            return super.shouldOverrideUrlLoading(view, request);
        }
    });

3.4 通过`WebChromeClient`的`onJsAlert()`、`onJsConfirm()`、`onJsPrompt()`方法回调拦截JS对话框`alert()`、`confirm()`、`prompt()`消息

关于WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法，可以在我的 WebView全面解析这篇文章中得到解答。

由于alert()没有返回值，confirm()只能返回true或者false，而prompt()可以返回任意类型的值，因此更加的灵活，这里，以prompt()举例。

3.4.1 先约定好在`prompt()`中显示信息的协议

比如以js://webview?arg1=111开头。

3.4.2 在JS中定义调用方法

//JS调用通过prompt()调用Android原生方法
function callAndroid3(){
    var result = prompt("js://webview?arg1=111");

    alert(result);
}

3.4.3 Android端的WebView设置`WebChromeClient`对传入的参数进行解析并返回

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

    Log.e("ll",message + " , " + defaultValue);
    if(message.startsWith("js")){
        if(message.contains("webview")){
            //confirm表示确认（并返回值），cancel表示取消。
            result.confirm("8848");
            //返回true表示不弹出系统提示框
            return true;
        }
    }
    return super.onJsPrompt(view,url,message,defaultValue,result);
}

5、总结

几种调用方式的优缺点总结如下：

Android与JS互相调用总结

6、参考资料

最全面总结 Android WebView与 JS 的交互方式