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() {
                               @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
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 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 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
~~喵印

你可能感兴趣的:(Android webview和js的交互)