Android 去调用JS 的代码
- 通过WebView的loadUrl()
先写一个html，很简单的一个代码，alert显示。
android_load_js.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Android调用 JS 代码demo</title>
// JS代码
<script>
// Android需要调用的方法
function callJS(){
alert("Android调用了JS的callJS方法");
}
</script>
</head>
</html>在Activity中
mWebSettings = mWebview.getSettings();
//与JS交互开关
mWebSettings.setJavaScriptEnabled(true);
//设置允许JS弹窗
mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
mWebview.loadUrl("file:///android_asset/android_load_js.html");
//在这我用了一个TextView 点击事件中去调用JS中的方法
beginLoading.setOnClickListener(new View.OnClickListener() {
[@Override]()
public void onClick(View view) {
//执行JS方法
mWebview.loadUrl("javascript:callJS()");
}
});
mWebview.setWebChromeClient(new WebChromeClient() {
//获取网站标题
[@Override]()
public void onReceivedTitle(WebView view, String title) {
System.out.println("标题在这里");
mtitle.setText(title);
}
//获取加载进度
[@Override]()
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress < 100) {
String progress = newProgress + "%";
loading.setText(progress);
} else if (newProgress == 100) {
String progress = newProgress + "%";
loading.setText(progress);
}
}
//由于设置了弹窗检验调用结果,所以需要支持js对话框
//webview只是载体，内容的渲染需要使用webviewChromClient类去实现
//通过设置WebChromeClient对象处理JavaScript的对话框
//设置响应js 的Alert()函数
[@Override]()
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(TestActivity.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
[@Override]()
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});- 通过WebView的evaluateJavascript()
该方法比第一种方法效率更高，因为该方法的执行不会使页面刷新，而第一种方法（loadUrl）的执行则会。该方法在Android 4.4 后才可使用，该方法在主线程执行
//将上面webView.loadUrl("javascript:callJS()")替换为
mWebview.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});可以做一下兼容：
if (Build.VERSION.SDK_INT > 18) {
mWebview.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
} else {
mWebview.loadUrl("javascript:callJS()");
}JS 去调用 Android的代码
- 通过WebView的addJavaScriptInterface()进行对象映射
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
<script>
function callAndroid(){
// 由于对象映射，所以调用test对象等于调用Android映射的对象
test.showLog("js调用了android中的hello方法");
}
</script>
</head>
<body>
//点击按钮则调用callAndroid函数
<button type="button" id="button1" onclick="callAndroid()" text="Android"></button>
</body>
</html>映射的代码
package org.professor.procartoon.temp;
import android.webkit.JavascriptInterface;
import org.professor.procartoon.utils.LogUtils;
/**
* Created by Caipeng on 2018.02.06.
*/
public class JSObject {
/**
* 定义JS需要调用的方法被JS调用的方法必须加入@JavascriptInterface注解
*/
@JavascriptInterface
public void showLog(String text) {
LogUtils.i(text);
}
}在Activity中的测试代码
mWebSettings.setJavaScriptEnabled(true);
mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//通过addJavascriptInterface()将Java对象映射到JS对象
//参数1：Javascript对象名
//参数2：Java对象名
mWebview.addJavascriptInterface(new JSObject(),"test");
mWebview.loadUrl("file:///android_asset/android_load_js.html");- 通过WebViewClient的ShouldOverrideUrlLoading() 方法进行回调拦截
Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url，解析该 url 的协议，如果检测到是预先约定好的协议，就调用Android相应的方法。
html Document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
<script>
function callAndroid(){
//协议org://professor?arg1=com&arg2=test
document.location = "org://professor?arg1=111&arg2=222";
}
</script>
</head>
<body>
//点击按钮则调用callAndroid函数
<button type="button" id="button1" onclick="callAndroid()">CallAndroid</button>
</body>
</html>JAVA代码
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
//一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
Uri uri = Uri.parse(request.getUrl().toString());
if (uri.getScheme().equals("org")) {
if (uri.getAuthority().equals("professor")) {
LogUtils.i(uri.getQueryParameter("arg1"));
}
return true;
}
return super.shouldOverrideUrlLoading(view, request);
}备注
JS获取Android方法的返回值复杂。 如果JS想要得到Android方法的返回值，只能通过 WebView 的loadUrl （）去执行 JS 方法把返回值传递回去，相关的代码如下：
//Android原生调用js
mWebView.loadUrl("javascript:returnResult(" + result + ")");
//需要在html中接收
function returnResult(result){
alert("result is" + result);
}- 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息
首先介绍下JS中的alert()、confirm()、prompt()三个方法
- alert(),弹出警告窗,没有返回值，在文本加入\n可换行
- confirm(),弹出确认框,两个返回值，返回布尔值，通过该值可以判断点击是确认还是取消(true表示点击了确认，false表示点击了取消)
- prompt(),弹出输入框,任意设置返回值，点击确认返回输入框中的值，点击取消返回null
原理：Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调分别拦截JS对话框 （即上面的三个方法），得到他们的消息内容，然后解析即可。
常用的拦截是：拦截 JS的输入框（即prompt（）方法）。因为只有prompt（）可以返回任意类型的值，操作最全面方便、更加灵活；而alert（）对话框没有返回值；confirm（）对话框只能返回两种状态（确定 / 取消）两个值。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
<script>
function callAndroid(){
//document.location = "org://professor?arg1=111&arg2=222";
var result=prompt("org://professor?arg1=111&arg2=222");
alert("demo " + result);
}
</script>
</head>
<body>
//点击按钮则调用callAndroid函数
<button type="button" id="button1" onclick="callAndroid()">CallAndroid</button>
</body>
</html>JAVA代码
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
//一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
Uri uri = Uri.parse(url);
if (uri.getScheme().equals("org")) {
if (uri.getAuthority().equals("professor")) {
LogUtils.i(uri.getQueryParameter("arg1"));
//参数result:代表消息框的返回值(输入值)
result.confirm("js调用了Android的方法成功啦");
}
return true;
}
return super.onJsPrompt(view, url, message, defaultValue, result);
}- 结语
由上可以比较，根据第三种方式，即：通过WebChromeClient的方法拦截比较灵活一些
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
