Android - webview原生和JavaScript(js)交互传值的几种方式

说明：

安卓的原生和webview之间需要传值等操作，下面是列了几种他们传值交互的几种方式。

1、通过loadurl()来调用：

js方法：

 

function methodName(jsonParams) {
	//处理jsonParams
}

 

 

安卓调用：

 

String url = "javascript:" + methodName + "(" + jsonParams + ");
webView.loadUrl(url);

 

说明：

就是这么简单，直接调用 WebView 的loadUrl(url)方法，当然参数 url 是比较特殊，前面的javascript:伪协议让我们可以通过一个链接来调用 JavaScript 函数，中间methodName是 JavaScript 中实现的函数，jsonParams是传入的参数。关于后面的void(0)。

2、addJavascriptInterface注入：

代码：

 

webView.addJavascriptInterface(new JsObject(), "injectedObject"); // 只有页面再加载，该对象才可见

 

 

说明：

只要原生的webview设置这个方法，原生和js之间是可以互相直接调用的（现在这个方法出现了漏洞，有些app市场监测到这个方法，就会不让上传app），addJavascriptInterface这种方式非常简单好用。但是这种方式在 Android 4.2之前的版本中存在安全问题：在4.2之前被注入的对象的所有公共方法(包括从父类继承过来的方法)都可以被访问到；在4.2以后，只有通过@JavascriptInterface注解的公共方法才能被访问。具体请看这篇WebView中接口隐患与手机挂马利用

3、shouldOverrideUrlLoading

说明：

这个方法大家都知道是拦截url访问的，这里的传值就是把值放在url里面传进来，进行拦截处理值：

代码：

 

webView.setWebViewClient(new WebViewClient() {//拦截url
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                LogUtils.d("请求-->总url:" + url);
                if (url.startsWith("mandaobridge")) {//如果不是正常url，测作为参数传递来处理（实现了传值操作）
                    handRequest(url);
                } else {//如果是正常url就加载url
                    view.loadUrl(url);
                }
                return true;
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);

                //UiUtils.showToast("出错");
            }
        });

 

 

4、alert、confirm、和prompt

说明：

这三个本来是原生webview给网页弹框的一些调用，但是弹框就会有提示语，这里就用这些提示语来作为值传递。

代码：

 

private void init webView() {     
        webView = new WebView(context);  
        WebSettings webSettings = webView.getSettings();  
        webSettings.setJavaScriptEnabled(true);//允许网页使用js  
        webView.setWebChromeClient(new WebChromeClient() {//允许有alert弹出框  
            @Override  
            public void onReceivedTitle(WebView view, String title) {  
                super.onReceivedTitle(view, title);  
                webTitle = title;  
            }  
  
            /**      
             * 处理alert弹出框      
             */         
            @Override         
            public boolean onJsAlert(WebView view,String url,          
                                     String message,JsResult result) {          
                Log.d(LOG_TAG,"onJsAlert:"+message);          
              //  mReusultText.setText("Alert:"+message);          
              /*  //对alert的简单封装        
                new AlertDialog.Builder(PhoneTest.this).        
                    setTitle("Alert").setMessage(message).setPositiveButton("OK",        
                    new DialogInterface.OnClickListener() {        
                        @Override       
                        public void onClick(DialogInterface arg0, int arg1) {        
                           //TODO        
                       }        
                }).create().show();        
                */    
                result.confirm();          
                return super.onJsConfirm(view,url,message, result);          
            }          
             
            /**      
             * 处理confirm弹出框      
             */         
            @Override         
            public boolean onJsConfirm(WebView view, String url, String message,          
                    JsResult result) {          
                Log.d(LOG_TAG, "onJsConfirm:"+message);          
                mReusultText.setText("Confirm:"+message); //捕获弹框消息给原生赋值，相当于传值了   
                //对confirm的简单封装          
                new AlertDialog.Builder(PhoneTest.this).          
                    setTitle("Confirm").setMessage(message).setPositiveButton("OK",          
                    new DialogInterface.OnClickListener() {          
                        @Override         
                        public void onClick(DialogInterface arg0, int arg1) {          
                           //TODO          
                       }          
                }).create().show();      
                result.confirm();          
                return true;    
                //如果采用下面的代码会另外再弹出个消息框，目前不知道原理    
                //return super.onJsConfirm(view, url, message, result);          
            }          
             
            /**      
             * 处理prompt弹出框      
             */         
            @Override         
            public boolean onJsPrompt(WebView view, String url, String message,          
                    String defaultValue, JsPromptResult result) {          
                Log.d(LOG_TAG,"onJsPrompt:"+message);          
                mReusultText.setText("Prompt input is :"+message);          
                result.confirm();          
                return super.onJsPrompt(view, url, message, message, result);          
            }          
      
        });  
}    

具体使用方法我新写了一篇博客： android webview获取js中的alert、confirm、和prompt，以及获取其值

 

5、evaluateJavascript

说明：

evaluateJavascript这个方法是原生webview直接调用网页js的方法，并且得到js方法的返回值，很方便，实现了原生和js无缝对接，但是这个有版本限制sdk大于19才能用，中国的市场4.4一下的手机多了去了，有很大的局限性。

代码：

 

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//sdk>19才有用
            final String[] paths = moduleUrl.split("/", 3);
            LogUtils.d("paths:" + paths[0] + "..." + paths[1] + "...." + paths[2]);


            String script = "mandaobridge.getParams('" + paths[2] + "')";
            webView.evaluateJavascript(script, new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String responseJson) {
                    LogUtils.d("调用js返回值:" + paths[2] + "--" + responseJson);
                    analyParams(paths, responseJson);
                }
            });
        } else {//sdk<19后,通过prompt来获取
            String[] paths = moduleUrl.split("/", 3);
            promptMap.put(paths[2], paths);
            webView.loadUrl("javascript:mandaobridge.getParams('!" + paths[2] + "')");
            LogUtils.d("Prompt请求:" + "mandaobridge.getParams('!" + paths[2] + "')");
        }

 

 

总结：

以上几种原生和网页js之间的交互慢慢继续完善使用方法和使用问题。转载说明出处！

 

 

 

---

 

ฅ՞•ﻌ•՞ฅ ~ 厚着脸皮要个赞赏哈 ~ ฅ՞•ﻌ•՞ฅ