Android与JS的交互简单实现
Android与JS的交互简单实现
现在Android的势头慢慢已经趋向平稳.java的光辉岁月再一次燃烧(虽然java一直都是一颗常青树).Android为什么要使用js呢?如果一个webview都可以解决的问题,问什么还要写android代码?android从业人员会不会失业,这种担心确实有必要啊.不过还是要看看谷歌baba的态度哦!闲话不多说.开车.友情提示:车速40迈!
概述:
既然是Android与JavaScript的交互.心中可定有疑问.
- 1,js如何调用android的代码,准确来说应该是webview如何调用
- 2.android如何调用js的代码
第一:js调用android代码
1.首先来一段最最简单的jsp代码
<body>
<p>WebView与Javascript交互p>
<div>
<button onClick="window.android.actionFromJs()">点击调用Android代码button>
div>
<br />
<div>
<button onClick="window.android.actionFromJsWithParam(' data come from Js')">点击调用Android代码并传递参数button>
div>
<br />
<div id="log_msg">调用打印信息div>
body>等等,
不传递参数:
<button onClick="window.android.actionFromJs()">点击调用Android代码button>
将参数传递到android代码中
<button onClick="window.android.actionFromJsWithParam('data come from Js')">点击调用Android代码并传递参数button>onClick我懂,就是为button注册一个点击事件.可是window.android.actionFromJs()是什么鬼.其实actionFromJs()就是android代码中的一个普通方法.那么window.android又是什么东西:
如果我们想实现交互.还要对webview就行一些设置:
// 启用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
/** 为webview添加注册js 接口回调监听.
*
* 参数一: 接口对象
* 参数二: 接口别名(别名让js代码使用)
* 如果别名写"haha". 那么js中就要写window.haha.方法名
*/
mWebView.addJavascriptInterface(this, "android");2.来看android怎么写
/**
* js调用此方法
*/
@android.webkit.JavascriptInterface
public void actionFromJs() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js调用了Android函数", Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\njs调用了Android函数";
logTextView.setText(text);
}
});
}
/**
* js调用此方法. 并且将参数传递过来
*
* @param str js 传递过来的参数
*/
@android.webkit.JavascriptInterface
public void actionFromJsWithParam(final String str) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js调用了Android函数传递参数：" + str, Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\njs调用了Android函数传递参数：" + str;
logTextView.setText(text);
}
});
}actionFromJs(),actionFromJsWithParam(final String str)方法就是我们在android代码中定义好的方法.以供js去调用.
注意: 要想让js调用必须在方法名上加注解
@android.webkit.JavascriptInterface
哦.js掉用android已经搞定
第二:android调用js代码
android调用js代码那就更加简单了.
- 首先我们肯定要有js代码:
<html>
<head>
<script type="text/javascript">
// 无参方法
function actionFromNative() {
document.getElementById("log_msg").innerHTML += "Android调用了js函数" ;
}
//有参方法
function actionFromNativeWithParam(arg) {
document.getElementById("log_msg").innerHTML += ("Android调用了js函数并传递参数：" + arg);
}
script>
head>
<body>
<div id="log_msg">调用打印信息div>
body>
html>
- 其次:android代码调用方法
/**
* 调用js.
* WebView.loadUrl("javascript:js中定义的方法")
*/
button.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
// 无参数调用 android端调用js 方法
mWebView.loadUrl("javascript:actionFromNative()");
// 传递参数调用
mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
}
});
这样就能实现相互之间的伤害了.
3.bug修复
有些手机使用webview打开时.会提示用浏览器打开网页.我们要对webview设置一下了
/**
* 重写这个方法的话,加载页面就不会弹出浏览器打开了
*/
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
/**
* 页面加载完成回调
* @param view
* @param url
*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
});
附:实现代码
http://download.csdn.net/detail/fengltxx/9694232