Android webview和js的交互

参考资料
前言：此篇文档出于对上述资料的学习总结以及补充，由于涉及加载本地html文件，所以也说明一下创建文件方法，好了废话就这么多。

assets文件夹以及html文件的创建方法

1.目录结构

在Android模式下，与java文件夹在同一目录下

目录.jpg

2.创建方法

指定目录下->右键new->Folder->assets Folder
然后在创建的新文件夹中新建file文件，选取html文件类型即可。

webview和js的交互

1.android调用js中的代码

mWebview.loadUrl()
mWebview.evaluateJavascript()
具体使用摘录大神代码

                   if (version < 18) {
                           myWebview.loadUrl("javascript:callJS()");
                       } else {
                           myWebview.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
                               @Override
                               public void onReceiveValue(String value) {
                                   //此处为 js 返回的结果
                               }
                           });
                       }

扩展

利用loadUrl（）方法可以动态添加js代码，比如为所有图片添加点击事件

private static void addImageClickListener(WebView webView) {
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); " +
                "for(var i=0;i<objs.length;i++)  " +
                "{"
                + "if(objs[i].parentNode.getAttribute('href')==null){"
                +"if(objs[i].parentNode.nodeName != 'SECTION'){"
                + "    objs[i].onclick=function()  " +
                "    {  "
                + "        window.imagelistener.openImage(this.src);  " +//通过js代码找到标签为img的代码块，设置点击的监听方法与本地的openImage方法进行连接
                "    }  "
                + "}"
                + "}"
                + "}"
                + "})()");
    }

2.js调用android中的代码

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

大神写的很详细，但还是想记录下自己的程序(js文件就记录了)
方法一

public class AndroidToJs extends Object {
    @JavascriptInterface
    public void hello(String msg){
        System.out.println(msg);
    }
}
---------------------------------------------------------------
 myWebview = findViewById(R.id.main_webview_id);
        WebSettings webSettings=myWebview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        myWebview.addJavascriptInterface(new AndroidToJs(),"android");
        myWebview.loadUrl("file:///android_asset/androidToJs");

方法二

   myWebview = findViewById(R.id.main_webview_id);
        WebSettings webSettings = myWebview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        myWebview.loadUrl("file:///android_asset/androidToJs2");
        myWebview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Uri uri = Uri.parse(url);
                if (uri.getScheme().equals("js")) {
                  if(uri.getAuthority().equals("webview")){
                      System.out.println("js调用了Android的方法");
                      //获得链接中传过来的参数
                      Set<String> collection=uri.getQueryParameterNames();
                      for (String str : collection) {
                          System.out.println("value="+uri.getQueryParameter(str));
                      }
                    }
                }
                return true;
            }
        });

方法三

 webView = findViewById(R.id.main_webview_id);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webView.loadUrl("file:///android_asset/androidToJs3");
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

                Uri uri = Uri.parse(message);
                if (uri.getScheme().equals("js")) {
                    if (uri.getAuthority().equals("demo")) {
                        System.out.println("js调用了Android的方法");
                        //获得链接中传过来的参数
                        Set<String> collection = uri.getQueryParameterNames();
                        for (String str : collection) {
                            System.out.println("value=" + uri.getQueryParameter(str));
                        }
                        result.confirm("js调用了Android的方法成功啦");
                    }
                    return true;
                }
                return super.onJsPrompt(view, url, message, defaultValue, result);
            }
            // 拦截JS的警告框
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }

            // 拦截JS的确认框
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                return super.onJsConfirm(view, url, message, result);
            }
        });
    }

注意点:
1.方法2解析的是url，方法三解析的是message
2.方法2返回值的获得需要利用android调js的方法实现，方法三利用result.conf2.irm("js调用了Android的方法成功啦");
3.加载本地文件的时候，自己创建的什么文件就写什么文件
比如assets目录下的文件名为androidToJs，那加载时就为loadurl（"file:///android_asset/androidToJs")
demo
～～喵印