手把手教小白实现WebView中java与js的交互：
java调用js方法一：
效果图：
java调用js.png
shopping.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title id="title">Title</title>
</head>
<script language="JavaScript">
// Android需要调用的方法
function callJS(){
alert("Android调用了JS的callJS方法");
}
</script>
<body>
<dir>WebView</dir>
</body>
</html>
第一步：在assets目录中添加shopping.html文件。
第二步：在activity中加载WebView组件，并加载html
avtivity.java
webView.loadUrl("file:///android_asset/shopping.html");
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
new AlertDialog.Builder(view.getContext()).setTitle("提示").setMessage(message).show();
return true;
}
});
mTvBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webView.loadUrl("javascript:callJS()");
}
});
注意点：
1、通过setJavaScriptEnable(true) 让WebView支持JavaScript
2、setJavaScriptCanOpenWindowsAutomatically(true)开启弹窗
3、在Android中需要重写js的Alert(),Confirm(),Prompt()，否则会遇到无法开启弹窗的问题。
java调用js方法二：
注意：evaluateJavascript中不需要添加javascript修饰js的方法
mTvBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// webView.loadUrl("javascript:callJS()");
// todo evaluateJavascript中不需要添加javascript修饰js的方法
webView.evaluateJavascript("callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(ShoppingActivity.this,value,Toast.LENGTH_LONG).show();
mTvBtn.setText(value);
}
});
}
});
差异：evaluateJavascript可以获得js的返回值，但是只支持4.4及以上Android版本
js调用java方法一：
JS调用Android代码.png
H5这边
shopping.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title id="title">Title</title>
</head>
<script language="JavaScript">
// Android需要调用的方法
function callJS(){
alert("Android调用了JS的callJS方法");
}
function callAndroid(){
javaObject.showToast('JS 唤起Android Toast')
}
</script>
<body>
<text>WebView</text>
<button type="button" id="button1" onclick="callAndroid()">唤起Android toast</button>
</body>
</html>
h5中js函数内通过约定类名和方法调用java代码： javaObject.showToast('JS 唤起Android Toast')
Android这边
创建约定类：JavaObject.java
public class JavaObject {
private final Context mContext;
public JavaObject(Context context) {
mContext = context;
}
@JavascriptInterface
public void showToast(String msg) {
Toast.makeText(mContext, msg, Toast.LENGTH_LONG).show();
}
}
在activity中添加java和js的链接桥梁，name要与js中的一致
webView.addJavascriptInterface(new JavaObject(this),"javaObject");
js调用java方法二：
通过复写WebViewClient中shouldOverrideUrlLoading的方法，并约定js中的URL协议
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Uri uri = Uri.parse(url);
if ("js".equals(uri.getScheme())){
if ("webView".equals(uri.getAuthority())) {
Set<String> params = uri.getQueryParameterNames();
}
}
return super.shouldOverrideUrlLoading(view, url);
}
});
特点：
优点：不存在方式1的漏洞；
缺点：JS获取Android方法的返回值复杂。
网友评论