Android：你要的WebView与JS交互⽅式都在这⾥了前⾔
现在很多App⾥都内置了Web⽹页（Hybrid App），⽐如说很多电商平台，淘宝、京东、聚划算等等，如下图
上述功能是由Android的WebView实现的，其中涉及到Android客户端与Web⽹页交互的实现
今天我将全⾯介绍Android通过WebView与JS交互的全⾯⽅式
阅读本⽂前请先阅读：
⽬录
1. 交互⽅式总结
Android与JS通过WebView互相调⽤⽅法，实际上是：
Android去调⽤JS的代码
JS去调⽤Android的代码
⼆者沟通的桥梁是WebView
对于Android调⽤JS代码的⽅法有2种：
1. 通过WebView的loadUrl（）
2. 通过WebView的evaluateJavascript（）
对于JS调⽤Android代码的⽅法有3种：
1. 通过WebView的addJavascriptInterface（）进⾏对象映射
2. 通过WebViewClient的shouldOverrideUrlLoading ()⽅法回调拦截 url
3. 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt（）⽅法回调拦截JS对话框alert()、confirm()、prompt（）消息
2. 具体分析
2.1 Android通过WebView调⽤ JS 代码
对于Android调⽤JS代码的⽅法有2种：
1. 通过WebView的loadUrl（）
2. 通过WebView的evaluateJavascript（）
⽅式1：通过WebView的loadUrl（）
实例介绍：点击Android按钮，即调⽤WebView JS（⽂本名为javascript）中callJS（）
具体使⽤：
步骤1：将需要调⽤的JS代码以.html格式放到src/main/assets⽂件夹⾥
1. 为了⽅便展⽰，本⽂是采⽤Andorid调⽤本地JS代码说明；
2. 实际情况时，Android更多的是调⽤远程JS代码，即将加载的JS代码路径改成url即可
需要加载JS代码：javascript.html
// ⽂本名：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
// JS代码
<script>
// Android需要调⽤的⽅法
function callJS(){
alert("Android调⽤了JS的callJS⽅法");
}
</script>
</head>
</html>
步骤2：在Android⾥通过WebView设置调⽤JS代码
Android代码：MainActivity.java
注释已经⾮常清楚
public class MainActivity extends AppCompatActivity {
WebView mWebView;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
mWebView =(WebView) findViewById(R.id.webview);
WebSettings webSettings = Settings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 先载⼊JS代码
// 格式规定为:file:///android_asset/⽂件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 通过Handler发送消息
mWebView.post(new Runnable() {
@Override
public void run() {
// 注意调⽤的JS⽅法名要对应上
// 调⽤javascript的callJS()⽅法
mWebView.loadUrl("javascript:callJS()");
}
});
}
});
// 由于设置了弹窗检验调⽤结果，所以需要⽀持js对话框
// webview只是载体，内容的渲染需要使⽤webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
//设置响应js 的Alert()函数
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
}
});
b.setCancelable(false);
return true;
}
});
}
}
特别注意：JS代码调⽤⼀定要在onPageFinished（）回调之后才能调⽤，否则不会调⽤。
onPageFinished()属于WebViewClient类的⽅法，主要在页⾯加载结束时调⽤
⽅式2：通过WebView的evaluateJavascript（）优点：该⽅法⽐第⼀种⽅法效率更⾼、使⽤更简洁。
1. 因为该⽅法的执⾏不会使页⾯刷新，⽽第⼀种⽅法（loadUrl ）的执⾏则会。
2. Android 4.4 后才可使⽤
具体使⽤
// 只需要将第⼀种⽅法的loadUrl()换成下⾯该⽅法即可
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
2.1.2 ⽅法对⽐
2.1.3 使⽤建议
两种⽅法混合使⽤，即Android 4.4以下使⽤⽅法1，Android 4.4以上⽅法2
// Android版本变量
final int version = Build.VERSION.SDK_INT;
// 因为该⽅法在 Android 4.4 版本才可使⽤，所以使⽤时需进⾏版本判断
if (version < 18) {
mWebView.loadUrl("javascript:callJS()");
} else {
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
/
/此处为 js 返回的结果
}
});
}
2.2 JS通过WebView调⽤ Android 代码
对于JS调⽤Android代码的⽅法有3种：
1. 通过WebView的addJavascriptInterface（）进⾏对象映射
2. 通过WebViewClient的shouldOverrideUrlLoading ()⽅法回调拦截 url
3. 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt（）⽅法回调拦截JS对话框alert()、confirm()、prompt（）消息2.2.1 ⽅法分析
⽅式1：通过WebView的addJavascriptInterface（）进⾏对象映射
步骤1：定义⼀个与JS对象映射关系的Android类：AndroidtoJs
AndroidtoJs.java（注释已经⾮常清楚）
// 继承⾃Object类
public class AndroidtoJs extends Object {
// 定义JS需要调⽤的⽅法
// 被JS调⽤的⽅法必须加⼊@JavascriptInterface注解
@JavascriptInterface
public void hello(String msg) {
System.out.println("JS调⽤了Android的hello⽅法");
}
}
步骤2：将需要调⽤的JS代码以.html格式放到src/main/assets⽂件夹⾥
需要加载JS代码：javascript.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson</title>
<script>javascript说明
function callAndroid(){
// 由于对象映射，所以调⽤test对象等于调⽤Android映射的对象
test.hello("js调⽤了android中的hello⽅法");
}
</script>
</head>
<body>
//点击按钮则调⽤callAndroid函数
<button type="button" id="button1" onclick="callAndroid()"></button>
</body>
</html>
步骤3：在Android⾥通过WebView设置Android类与JS代码的映射
详细请看注释
public class MainActivity extends AppCompatActivity {
WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = Settings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 通过addJavascriptInterface()将Java对象映射到JS对象
//参数1：Javascript对象名
//参数2：Java对象名
mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象
// 加载JS代码
// 格式规定为:file:///android_asset/⽂件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
特点
优点：使⽤简单
仅将Android对象和JS对象映射即可
缺点：存在严重的漏洞问题，具体请看⽂章：
⽅式2：通过WebViewClient的⽅法shouldOverrideUrlLoading ()回调拦截 url 具体原理：
1. Android通过WebViewClient的回调⽅法shouldOverrideUrlLoading ()拦截 url
2. 解析该 url 的协议
3. 如果检测到是预先约定好的协议，就调⽤相应⽅法
即JS需要调⽤Android的⽅法
具体使⽤：
步骤1：在JS约定所需要的Url协议
JS代码：javascript.html
以.html格式放到src/main/assets⽂件夹⾥
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
<script>
function callAndroid(){
/*约定的url协议为：js://webview?arg1=111&arg2=222*/
document.location = "js://webview?arg1=111&arg2=222";
}
</script>
</head>
<!-- 点击按钮则调⽤callAndroid（）⽅法  -->
<body>
<button type="button" id="button1" onclick="callAndroid()">点击调⽤Android代码</button>
</body>
</html>
当该JS通过Android的mWebView.loadUrl("file:///android_asset/javascript.html")加载后，就会回调shouldOverrideUrlLoading （），接下来继续看步骤2：
步骤2：在Android通过WebViewClient复写shouldOverrideUrlLoading （）
MainActivity.java
public class MainActivity extends AppCompatActivity {
WebView mWebView;
//    Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = Settings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 步骤1：加载JS代码
// 格式规定为:file:///android_asset/⽂件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
// 复写WebViewClient类的shouldOverrideUrlLoading⽅法
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 步骤2：根据协议的参数，判断是否是所需要的url
// ⼀般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
//假定传⼊进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）
Uri uri = Uri.parse(url);
// 如果url的协议 = 预先约定的 js 协议
// 就解析往下解析参数
if ( Scheme().equals("js")) {
// 如果 authority  = 预先约定协议⾥的 webview，即代表都符合约定的协议
/
/ 所以拦截url，下⾯JS开始调⽤Android需要的⽅法
if (Authority().equals("webview")) {
//  步骤3：
// 执⾏JS所需要调⽤的逻辑
System.out.println("js调⽤了Android的⽅法");
// 可以在协议上带有参数并传递到Android上
HashMap<String, String> params = new HashMap<>();
Set<String> collection = QueryParameterNames();
}
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
}
);
}
}
特点
优点：不存在⽅式1的漏洞；
缺点：JS获取Android⽅法的返回值复杂。
如果JS想要得到Android⽅法的返回值，只能通过 WebView 的loadUrl （）去执⾏ JS ⽅法把返回值传递回去，相关的代码如下：
// Android：MainActivity.java
mWebView.loadUrl("javascript:returnResult(" + result + ")");
// JS：javascript.html
function returnResult(result){
alert("result is" + result);
}
⽅式3：通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt（）⽅法回调拦截JS对话框alert()、confirm()、prompt（）消息
在JS中，有三个常⽤的对话框⽅法：
⽅式3的原理：Android通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt（）⽅法回调分别拦截JS对话框
（即上述三个⽅法），得到他们的消息内容，然后解析即可。
下⾯的例⼦将⽤拦截 JS的输⼊框（即prompt（）⽅法）说明：
1. 常⽤的拦截是：拦截 JS的输⼊框（即prompt（）⽅法）
2. 因为只有prompt（）可以返回任意类型的值，操作最全⾯⽅便、更加灵活；⽽alert（）对话框没有返回值；confirm（）对话框只能返回两种状态（确定 /
取消）两个值
步骤1：加载JS代码，如下：
javascript.html
以.html格式放到src/main/assets⽂件夹⾥
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
<script>
function clickprompt(){
// 调⽤prompt（）
var result=prompt("js://demo?arg1=111&arg2=222");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。