WebView与JavaScript交互

随着Html5的崛起，越来越多的App开始引入网页，如现在比较火热的React Native、Cordova等框架，难免我们的项目中会遇到WebView和JavaScript的交互。

首先我们来配置下我们WebView

webview = (WebView) findViewById(R.id.webview);
        webview.loadUrl("file:///android_asset/testjs.html");
        findViewById(R.id.btn_call_js_no_params).setOnClickListener(this);
        findViewById(R.id.btn_call_js_params).setOnClickListener(this);
        settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗
        webview.setWebChromeClient(new WebChromeClient());
        webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法

1.Android调用JavaScript无参方法

js方法

 function sendMsg(){
       return "Android调用了Js无参函数";
    }

Android调用js的sendMsg方法

 webview.evaluateJavascript("javascript:sendMsg()", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                        if (value != null) {
                            Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();
                        }
                    }
                });

我们通过evaluateJavascript方法调用了JavaScript的sendMsg函数，并且会拿到一个回调字符串，这个字符串就是Js通过return给我们的字符串

很遗憾，这个方法必须在Android API 19以上的版本才可以使用，如果要兼容以下的版本，必须通过特殊的方法进行处理，不过今天我们就暂不兼容以下的版本，因为现在基本都是5.0以上的用户了。

2.Android调用JavaScript有参方法

js方法

function getAndroidValue(value){
        alert(value);
    }

Android方法

 String msg2Js = "Android传递了一个参数给Js";
                webview.evaluateJavascript("javascript:getAndroidValue('" + msg2Js + "')", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                    }
                });

这里Android调用了Js的getAndroidValue方法，并且传递了一个字符串参数给它，让js弹窗。弹窗内容就是我们传递的参数

3.JavaScript调用Android无参方法

js代码

调用Android无参方法

function callAndroidNoParams(){
        JavaScriptObject.noParams();
    }

Android这里开放了Js的接口

 webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法

我们在AndroidJS这个类里面

class AndroidJs extends Object {

        @JavascriptInterface
        public void noParams() {
            Toast.makeText(MainActivity.this, "Js调用Android无参方法", Toast.LENGTH_SHORT).show();
        }
    }

4.JavaScript调用Android有参方法

Js代码

调用Android有参方法

function callAndroidParams(){
        JavaScriptObject.paramsToast("js调用Android有参方法");
    }

Android暴露给Js的方法，获取他给的值，并且Toast出来

 @JavascriptInterface
        public void paramsToast(String content){
            if (content!=null){
                Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();
            }
        }

提示：

---

至于Android5.0以下的版本如果想获取Js的返回值，建议调用Js方法，然后让Js调我们的方法将值传递给我们

全部代码

testjs.html

    
    
    
    
    
    

    



    Hello World!!!
    调用Android无参方法
    

    调用Android有参方法

Android代码

package com.wj.jsjavademo;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public class MainActivity extends AppCompatActivity implements View.OnClickListener {


    private WebView webview;
    private WebSettings settings;


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

        initWebView();
    }

    private void initWebView() {
        webview = (WebView) findViewById(R.id.webview);
        webview.loadUrl("file:///android_asset/testjs.html");
        findViewById(R.id.btn_call_js_no_params).setOnClickListener(this);
        findViewById(R.id.btn_call_js_params).setOnClickListener(this);
        settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗
        webview.setWebChromeClient(new WebChromeClient());
        webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_call_js_no_params:
                webview.evaluateJavascript("javascript:sendMsg()", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                        if (value != null) {
                            Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();
                        }
                    }
                });
                break;
            case R.id.btn_call_js_params:
                String msg2Js = "Android传递了一个参数给Js";
                webview.evaluateJavascript("javascript:getAndroidValue('" + msg2Js + "')", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                    }
                });
                break;
        }
    }

    class AndroidJs extends Object {

        @JavascriptInterface
        public void noParams() {
            Toast.makeText(MainActivity.this, "Js调用Android无参方法", Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void paramsToast(String content){
            if (content!=null){
                Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();
            }
        }
    }
}