1.首先准备一个test.html文档，如下：
js交互android
注意看网页中《调用android方法》的button的点击事件，onclick中的内容就相当于指向android中adrdMethod()方法的id.
2.Android的布局文件如下：
3.在WebView中加载test.html页面，并且与Android交互
界面.png
//
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends AppCompatActivity {
private WebView webView;
private Button button;
final String jsonStr = "{\"Developer\":\"Alden\",\"Place\":\"Nanjing\"}";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webview);
button = (Button) findViewById(R.id.btn);
webView.setWebChromeClient(new WebChromeClient()
{
/*此处覆盖的是javascript中的alert方法。
*当网页需要弹出alert窗口时，会执行onJsAlert中的方法
* 网页自身的alert方法不会被调用。
*/
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
Log.d("info", "弹出了提示框");
result.confirm();
return true; }
/*此处覆盖的是javascript中的confirm方法。
*当网页需要弹出confirm窗口时，会执行onJsConfirm中的方法
* 网页自身的confirm方法不会被调用。 */
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
Log.d("info", "弹出了确认框");
result.confirm();
return true; }
//在方法中写自己想要取代弹出js输入框的实现代码，比如一个Dialog
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
Log.d("info", "弹出了输入框");
result.confirm();
return true; }
/*
* 如果页面被强制关闭,弹窗提示：是否确定离开？
* 点击确定 保存数据离开，点击取消，停留在当前页面 */
@Override
public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {
Log.d("info", "弹出了离开确认框");
result.confirm();
return true; }
});
webView.setWebViewClient(new WebViewClient() {
/*点击页面的某条链接进行跳转的话，会启动系统的默认浏览器进行加载，调出了我们本身的应用
* 因此，要在shouldOverrideUrlLoading方法中
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) { //使用当前的WebView加载页面 view.loadUrl(url); return true; }
/*
* 网页加载完毕(仅指主页，不包括图片)
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
/*
* 网页加载完毕(仅指主页，不包括图片)
*/
@Override
public void onPageFinished(WebView view, String url)
{
// TODO Auto-generated method stub
super.onPageFinished(view, url);
}
/*
* 加载页面资源
*/
@Override
public void onLoadResource(WebView view, String url) {
// TODO Auto-generated method stub
super.onLoadResource(view, url);
}
/*
* 错误提示
*/
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
// TODO Auto-generated method stub
super.onReceivedError(view, errorCode, description, failingUrl);
} });
//支持js代码（必须要的）
webView.getSettings().setJavaScriptEnabled(true);
//设置是否支持缩放
webView.getSettings().setSupportZoom(false);
//js调用android的方法接口，第二个参数就相当于js对象找android中这个方法的钥匙，
webView.addJavascriptInterface(new Object(){
//此方法内容须创建子线程操作，不然会出现下面这个错误
//Uncaught Error: Error calling method on NPObject
@JavascriptInterface
public void adrdMethod() {
new Thread(new Runnable() {
@Override
public void run() {
Log.d("info", "js调用了Android方法");
}
}).start();
}
},"demo");
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("info", "Android调用了js方法");
/*
* 通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称为xxx的javascript方法
*/
webView.loadUrl("javascript:rfInfo("+jsonStr+")"); }
});
webView.loadUrl("file:///android_asset/test.html"); }}
总结：
1.Android调用js中的方法：
通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称为xxx的javascript方法
2.js调用Android中的方法：
webView.addJavascriptInterface（Object object,String str）：第一个参数是一个类对象，第二个参数是js中调用此类中的方法的标识
3.js调用的android的方法中的操作需要在子线程中，不然报错
Uncaught Error: Error calling method on NPObject ；
4.首先你要支持js代码（必须要的）
webView.getSettings().setJavaScriptEnabled(true);