Android高级进阶：WebView java与JavaScript交互详解

手把手教小白实现WebView中java与js的交互：

java调用js方法一：

效果图：

java调用js.png

shopping.html

    
    



WebView

第一步：在assets目录中添加shopping.html文件。

第二步：在activity中加载WebView组件，并加载html

avtivity.java

        webView.loadUrl("file:///android_asset/shopping.html");
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                new AlertDialog.Builder(view.getContext()).setTitle("提示").setMessage(message).show();
                return true;
            }
        });
        mTvBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("javascript:callJS()");
            }
        });

注意点：

1、通过setJavaScriptEnable(true) 让WebView支持JavaScript
2、setJavaScriptCanOpenWindowsAutomatically(true)开启弹窗
3、在Android中需要重写js的Alert(),Confirm(),Prompt()，否则会遇到无法开启弹窗的问题。

java调用js方法二：

注意：evaluateJavascript中不需要添加javascript修饰js的方法

  mTvBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                webView.loadUrl("javascript:callJS()");
                
                // todo evaluateJavascript中不需要添加javascript修饰js的方法
                webView.evaluateJavascript("callJS()", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                        Toast.makeText(ShoppingActivity.this,value,Toast.LENGTH_LONG).show();
                        mTvBtn.setText(value);
                    }
                });
            }
        });

差异：evaluateJavascript可以获得js的返回值，但是只支持4.4及以上Android版本

js调用java方法一：

JS调用Android代码.png

H5这边

shopping.html

    
    



WebView
唤起Android toast

h5中js函数内通过约定类名和方法调用java代码： javaObject.showToast('JS 唤起Android Toast')

Android这边

创建约定类：JavaObject.java

public class JavaObject {

    private final Context mContext;

    public JavaObject(Context context) {
        mContext = context;
    }

    @JavascriptInterface
    public void showToast(String msg) {
        Toast.makeText(mContext, msg, Toast.LENGTH_LONG).show();
    }
}

在activity中添加java和js的链接桥梁，name要与js中的一致

webView.addJavascriptInterface(new JavaObject(this),"javaObject");

js调用java方法二：

通过复写WebViewClient中shouldOverrideUrlLoading的方法，并约定js中的URL协议

   webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Uri uri = Uri.parse(url);
                if ("js".equals(uri.getScheme())){
                    if ("webView".equals(uri.getAuthority())) {
                        Set params = uri.getQueryParameterNames();
                    }
                }
                return super.shouldOverrideUrlLoading(view, url);
            }
        });

特点：

优点：不存在方式1的漏洞；
缺点：JS获取Android方法的返回值复杂。