手把手教小白實(shí)現(xiàn)WebView中java與js的交互：
java調(diào)用js方法一：
效果圖：
java調(diào)用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需要調(diào)用的方法
function callJS(){
alert("Android調(diào)用了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()");
}
});
注意點(diǎn)：
1、通過(guò)setJavaScriptEnable(true) 讓W(xué)ebView支持JavaScript
2、setJavaScriptCanOpenWindowsAutomatically(true)開(kāi)啟彈窗
3、在A(yíng)ndroid中需要重寫(xiě)js的Alert(),Confirm(),Prompt()，否則會(huì)遇到無(wú)法開(kāi)啟彈窗的問(wèn)題。
java調(diào)用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調(diào)用java方法一：
JS調(diào)用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需要調(diào)用的方法
function callJS(){
alert("Android調(diào)用了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函數(shù)內(nèi)通過(guò)約定類(lèi)名和方法調(diào)用java代碼： javaObject.showToast('JS 喚起Android Toast')
Android這邊
創(chuàng)建約定類(lèi)：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調(diào)用java方法二：
通過(guò)復(fù)寫(xiě)WebViewClient中shouldOverrideUrlLoading的方法，并約定js中的URL協(xié)議
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);
}
});
特點(diǎn)：
優(yōu)點(diǎn)：不存在方式1的漏洞；
缺點(diǎn)：JS獲取Android方法的返回值復(fù)雜。
