Android 原生与H5 交互

原生调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>

哦了，先到这儿吧~