一、交互方式总结
Android 与 JS 通过 WebView 互相调用方法实现,实际上是:
-Android 去调用 JS 的代码
-JS 去调用 Android 的代码
二者沟通的桥梁是 WebView
对于 Android 调用 JS 代码的方法有 2 种:
- 通过WebView的loadUrl()
- 通过WebView的evaluateJavascript()
对于 JS 调用 Android 代码的方法有 3 种:
1.通过WebView的addJavascriptInterface()进行对象映射
2.通过 WebViewClient的shouldOverrideUrlLoading ()`方法回调拦截 url
3. 通过 WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截 JS 对话框alert()、confirm()、prompt()消息
二、具体分析
2.1 Android 通过 WebView 调用 JS 代码
方式 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) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView =(WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
// 设置与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.