美文网首页
Android 原生与H5 交互

Android 原生与H5 交互

作者: 木木禾木 | 来源:发表于2020-05-15 09:13 被阅读0次

    原生调H5

    方式1 mWebView.loadUrl() : 方便简洁,效率低,获取返回值麻烦。不需要获取返回值、对性能要求较低时使用
    方式2 mWebView.evaluateJavascript() : 效率高 ,向下兼容性差(仅用于4.4+, API>=19 )

        public void loadJs(String js) {
            // evaluateJavascript在 Android4.4 (API 19)版本之后才可使用,所以使用时需进行版本判断
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
                mWebView.loadUrl(js);
            } else {
                mWebView.evaluateJavascript(js, new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        //此处为 js 返回的结果
                    }
                });
            }
        }
    

    使用:

    原生调用:
    String js = "javascript:showAlertFromAndroid(\"I'm from TestWebViewActivity\")";
    mFragment.loadJs(js);
    
    H5中js方法:
    <script type="text/javascript">
       
        function showAlertFromAndroid(text){
            alert(text);
        }
    
    </script>
    


    H5调原生

    方式1 拦截shouldOverrideUrlLoading 根据不同的url 跳转不同的原生业务

        private class MyWebViewClient extends WebViewClient {
    
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    view.loadUrl(request.getUrl().toString());
                }
                // 拦截url
                return true;
            }
    
      }
    


    方式2 拦截onJsPrompt 根据不同的url 跳转不同的原生业务

        private class MyWebChromeClient extends WebChromeClient {
           
            @Override
            public void onReceivedTitle(WebView view, String title) {
                if (onTitleChangedListener != null) {
                    onTitleChangedListener.onTitleChanged(title);
                }
            }
    
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                //拦截JsPrompt,进行业务处理
                //dispatch(message);
                //执行confirm返回结果
                result.confirm("success");
                //true,拦截JavaScript的弹窗。如果拦截了,不会出现弹窗。
                //false,不拦截JavaScript的弹窗,由WebView自行决定弹窗。
                return true;
            }
        }
    

    如下,在 onJsPrompt 中接收到的message 就是 custom://test.com/home/news?name=娱乐&size=30,解析不同的message调起不同的原生业务

    <!DOCTYPE html>
    <html>
    <head>
        <title>test_html</title>
    
        <script type="text/javascript">
    
        function myPrompt() {
            var value = "custom://test.com/home/news?name=娱乐&size=30"
            var result = prompt(value,"张某某")
            alert(result);
        }
    
        </script>
    </head>
    <body>
    <button type="button" id="button3" onclick="showPrompt()">showPrompt</button>
    </body>
    </html>
    


    方式3 使用mWebView.addJavascriptInterface(object, name)
    Android4.2 以前WebView 提供了javascript 调用Java代码的方法,会造成很大的安全漏洞。Android官方在API 17后,限制javascript代码只能调用声明了@JavascriptInterface 注解的Java方法。

    如下

       //java的object类对象映射到js的name对象
       mWebView.addJavascriptInterface(new H5ToAndroid(), "H5ToAndroidProxy");
    
        public class H5ToAndroid {
    
            @SuppressLint("JavascriptInterface")
            @JavascriptInterface
            public String sendMessage(String message) {
                //拦截message
                return "success";
            }
    
        }
    

    html代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title>test_html</title>
    
        <script type="text/javascript">
    
        function h5ToAndroid() {
            var result = H5ToAndroidProxy.sendMessage("custom://test.com/home/news?name=娱乐&size=30");
            alert(result);
        }
    
        </script>
    </head>
    <body>
    
    <br><br>
    <button type="button" onclick="h5ToAndroid()">h5ToAndroid</button>
    <br><br>
    
    </body>
    </html>
    


    哦了,先到这儿吧~


    相关文章

      网友评论

          本文标题:Android 原生与H5 交互

          本文链接:https://www.haomeiwen.com/subject/vbcxohtx.html