一、什么是js与android交互？
通俗一点就是使用js代码调用java代码，或者使用java代码调用js代码。
二、为什么要使用js与java代码交互？
1.可以做一些js网页做本身处理不了的事情。例如：在网页上调用Android本地打电话，发短信功能、在网页上调用Android手机通讯录、在网页上调用第三方应用、在网页上调用一些Android的本地化处理（操作IO，数据库）等。
2.可以实现js开发人员与android开发人员合作开发。例如：js开发人员开发js代码供android开发人员调用，android开发人员就不必写js代码，可以专注于andrid开发，用到js的时候直接调用js代码就可以了。（反之亦然）
3.可以实现网页的动态更新。例如：可以利用js代码调用java的更新数据显示到网页上以达到动态更新网页的目的。
三、js代码调用java代码操作步骤
1.开启使用js功能
webSettings.setJavaScriptEnabled(true);
2.设置编码默认编码格式（编码格式要和html编码格式对应）
webSettings.setDefaultTextEncodingName("gbk");
3.注入提供的java对象到webView：主要是这段代码，解释一下，第一个参数定义了一个对象，该对象中可以写任意的方法，供js代码调用。第二个参数是该自定义对象的一个别名。js调用该对象的方法时会使用到该别名。调用格式为：对象名.方法名。例如：jsobject.androidAlert();调用android的alert对话框。
webView.addJavascriptInterface(new JsObject(), "jsobject");
4.设置WebChromeClient对象，并实现其中的onJsAlert、onJsConfirm等方法。注意这里必须要实现这几个方法，不然js调用java代码弹框时可能没有反应。
@Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { // TODO Auto-generated method stub return super.onJsAlert(view, url, message, result); } @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { // TODO Auto-generated method stub return super.onJsConfirm(view, url, message, result); } @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { // TODO Auto-generated method stub return super.onJsPrompt(view, url, message, defaultValue, result); }
四、android代码调用js代码
这个相对比较简单，只需要一行代码就能搞定：
例如：
//android调用js代码 webView.loadUrl("javascript:test_alert()");
做完以上几步后就可以实现真正调用了。下面给出完整代码
一、HTML代码jshtml.html（改代码放在assets文件夹下）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>这是一个HTML</title> <script type="text/javascript"> /*js调用android的方法*/ function jsCallAndroidAlert(){ jsobject.androidAlert(); } function test_alert() { /* 弹出对话框 */ alert("啊哈！连Android系统都调用JS函数了"); } </script> </head> <body> <button onclick="jsCallAndroidAlert()">test</button> <button onclick="test_alert()">test_alert</button> </body> </html>
二、MainActivity.java
package com.yw.webkitdemo; import android.os.Bundle; import android.annotation.SuppressLint; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.content.DialogInterface.OnClickListener; import android.graphics.Bitmap; import android.view.Menu; import android.view.View; import android.view.ViewGroup.LayoutParams; import android.webkit.JsPromptResult; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; import android.widget.ProgressBar; import android.widget.Toast; @SuppressLint("JavascriptInterface") public class MainActivity extends Activity implements android.view.View.OnClickListener{ private WebView webView; private ProgressBar progressBar; private Button btn_js; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_layout); btn_js = (Button)findViewById(R.id.btn_js); btn_js.setOnClickListener(this); progressBar = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal); progressBar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 5)); webView = (WebView) findViewById(R.id.webView); WebSettings webSettings = webView.getSettings(); // 启用javascrip功能 webSettings.setJavaScriptEnabled(true); //设置可以使用中文，否则会出现中文乱码 webSettings.setDefaultTextEncodingName("gbk"); webView.addView(progressBar); webView.setWebChromeClient(new WebChromeClient() { @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress == 100) { progressBar.setVisibility(View.GONE); } else { if (progressBar.getVisibility() == View.GONE) progressBar.setVisibility(View.VISIBLE); progressBar.setProgress(newProgress); } super.onProgressChanged(view, newProgress); } @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { // TODO Auto-generated method stub return super.onJsAlert(view, url, message, result); } @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { // TODO Auto-generated method stub return super.onJsConfirm(view, url, message, result); } @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { // TODO Auto-generated method stub return super.onJsPrompt(view, url, message, defaultValue, result); } }); /* * 此段代码在不做处理的情况下会弹出多个浏览器选择界面 webView.loadUrl("http://www.baidu.com/"); */ webView.setWebViewClient(new WebViewClient() { @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); } }); // webView.loadUrl("http://www.baidu.com/"); /** * 自定义对象，以及对象别名 * 自定义对象中定义的方法可以供js调用 * function jsCallAndroidAlert(){ jsobject.androidAlert(); } */ webView.addJavascriptInterface(new JsObject(), "jsobject"); //加载我们自定义的html网页并将其显示在webView上 webView.loadUrl("file:///android_asset/jshtml.html"); } /** * 此类的方法对应html中js的方法，供js调用Android的方法 * * @author Administrator * */ class JsObject { public void androidAlert() { AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this); dialog.setTitle("温馨提示"); dialog.setMessage("js调用了Android的Alert，测试完毕是否退出？"); dialog.setNegativeButton("否", new OnClickListener() { @Override public void onClick(DialogInterface arg0, int arg1) { } }); dialog.setPositiveButton("是", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }); AlertDialog dialog2 = dialog.create(); dialog2.show(); Toast.makeText(MainActivity.this, "您使用js调用了alert方法", Toast.LENGTH_LONG).show(); } public void androidConfirm() { Toast.makeText(MainActivity.this, "您使用js调用了confirm方法", Toast.LENGTH_LONG).show(); } } /** * 对系统的back键进行设置 */ @Override public void onBackPressed() { if (webView != null && webView.canGoBack()) { webView.goBack(); } else { super.onBackPressed(); } } @Override public void onClick(View v) { switch(v.getId()){ case R.id.btn_js: //android调用js代码 webView.loadUrl("javascript:test_alert()"); break; } } }
三、main_layout.xml文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> <Button android:id="@+id/btn_js" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="调用javascript函数" /> </LinearLayout>
完成。