WebView和 JS 那点事儿

Android 调用JS

一：loadUrl

思路：就是加载完js后（onPageFinished之后），通过loadUrl 对应js中函数名称，然后进行调用。

先把必须的代码写上：

WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限
 webSettings.setJavaScriptEnabled(true);
 // 设置允许JS弹窗
 webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 格式规定为:file:///android_asset/文件名.html
 mWebView.loadUrl("file:///android_asset/javascript.html");

在html 页面中加入函数

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>

// JS代码
     <script>
// Android需要调用的方法
   function callJS(){
      alert("Android调用了JS的callJS方法");
   }
</script>

   </head>

</html>

某个点击事件触发调用js代码，如下：

public void callJsMethod(View view){
        mWebView.post(new Runnable() {
            @Override
            public void run() {

                // 注意调用的JS方法名要对应上
                // 调用javascript的callJS()方法
                //方法一
                //mWebView.loadUrl("javascript:callJS()");
                //方法二
                mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        //此处为 js 返回的结果
                    }
                });
            }
        });
    }

// 由于设置了弹窗检验调用结果,所以需要支持js对话框
        // webview只是载体，内容的渲染需要使用webviewChromClient类去实现
        // 通过设置WebChromeClient对象处理JavaScript的对话框
        //设置响应js 的Alert()函数
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }

        });

或者把点击事件中的loadUrl换成 evaluateJavascript 方法。这样也可以实现Android 调用js 。

特别注意：JS代码调用一定要在 onPageFinished（）回调之后才能调用，否则不会调用。

onPageFinished()属于WebViewClient类的方法，主要在页面加载结束时调用，所以在callJsMethod中用mWebView.Post 方法。

JS 调用 Android

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

方式一：新建一个对象，添加 @JavascriptInterface 注解，用webView 添加addJavascriptInterface("对象", “对应的函数名称”)。

有安全问题，比如默认密码明文存储，js拿到Android对象后，可以用反射获取到其他对象进行信息读取，这是很危险的。

方式二：就是html页面中某个事件调用了js里面的函数，然后函数会执行一个方法并传递一个url，然后webView在shouldOverrideUlrLoading方法中去拦截url，并解析 scheme（协议格式） & authority（协议名）；并作出相应的动作；

方式三：利用WebChromeClient 的onJsAlert onJsConfirm onJsPrompt方法回调拦截onAlert、onPrompt等方法

参考文章： https://blog.csdn.net/carson_ho/article/details/64904691