Android 原生与H5 交互
2020-05-15 本文已影响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>
哦了，先到这儿吧~
