HTML -> JS ->Java来完成HTML5端与Android手机间的 互访
定义一个类，用于将数据暴露出来，JS通过该类暴露的方法(Public)来调用Android！
接着，我们在WebView所在页面Activity，使用下述代码:
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(object,"name");
然后js或者html中调用name.xxx调用对象里的暴露的方法：
比如： < input type="button" value="Toast提示" onclick="name.showToast('呵呵');"/>
另外，setJavaScriptEnabled是在Android 4.4以前的系统才有效
使用示例讲解：
1.HTML通过JS显示Toast与普通列表的对话框
代码实现：
先准备我们的HTML文件，创建好后放到assets目录下：
demo1.html:
Js调用Android
自定义一个Object对象，js通过该类暴露的方法来调用Android
MyObject.java:
/**
* Created by Jay on 2015/9/11 0011.
*/
public class MyObject {
private Context context;
public MyObject(Context context) {
this.context = context;
}
//将显示Toast和对话框的方法暴露给JS脚本调用
public void showToast(String name) {
Toast.makeText(context, name, Toast.LENGTH_SHORT).show();
}
public void showDialog() {
new AlertDialog.Builder(context)
.setTitle("联系人列表").setIcon(R.mipmap.ic_lion_icon)
.setItems(new String[]{"基神", "B神", "曹神", "街神", "翔神"}, null)
.setPositiveButton("确定", null).create().show();
}
}
最后是MainActivity.java，启用JavaScript支持，然后通过addJavascriptInterface暴露对象~
public class MainActivity extends AppCompatActivity {
private WebView wView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wView = (WebView) findViewById(R.id.wView);
wView.loadUrl("file:///android_asset/demo1.html");
WebSettings webSettings = wView.getSettings();
//①设置WebView允许调用js
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("UTF-8");
//②将object对象暴露给Js,调用addjavascriptInterface
wView.addJavascriptInterface(new MyObject(MainActivity.this), "myObj");
}
}
2）HTML通过JS调用三种不同的对话框
实现代码：
先往assets目录下塞一个html文件： demo2.html：
测试Js的三种不同对话框
三种对话框的使用
Alert对话框
Confirm对话框
Prompt对话框
PS：主布局和prompt布局这里就不贴了！ 直接上MainActivity.java:
public class MainActivity extends AppCompatActivity {
private WebView wView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wView = (WebView) findViewById(R.id.wView);
//获得WebSetting对象,支持js脚本,可访问文件,支持缩放,以及编码方式
WebSettings webSettings = wView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDefaultTextEncodingName("UTF-8");
//设置WebChromeClient,处理网页中的各种js事件
wView.setWebChromeClient(new MyWebChromeClient());
wView.loadUrl("file:///android_asset/demo2.html");
}
//这里需要自定义一个类实现WebChromeClient类,并重写三种不同对话框的处理方法
//分别重写onJsAlert,onJsConfirm,onJsPrompt方法
class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message,
final JsResult result) {
//创建一个Builder来显示网页中的对话框
new Builder(MainActivity.this).setTitle("Alert对话框").setMessage(message)
.setPositiveButton("确定", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
}).setCancelable(false).show();
return true;
}
@Override
public boolean onJsConfirm(WebView view, String url, String message,
final JsResult result) {
new Builder(MainActivity.this).setTitle("Confirm对话框").setMessage(message)
.setPositiveButton("确定", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
})
.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
}).setCancelable(false).show();
return true;
}
@Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, final JsPromptResult result) {
//①获得一个LayoutInflater对象factory,加载指定布局成相应对象
final LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
final View myview = inflater.inflate(R.layout.prompt_view, null);
//设置TextView对应网页中的提示信息,edit设置来自于网页的默认文字
((TextView) myview.findViewById(R.id.text)).setText(message);
((EditText) myview.findViewById(R.id.edit)).setText(defaultValue);
//定义对话框上的确定按钮
new Builder(MainActivity.this).setTitle("Prompt对话框").setView(myview)
.setPositiveButton("确定", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//单击确定后取得输入的值,传给网页处理
String value = ((EditText) myview.findViewById(R.id.edit)).getText().toString();
result.confirm(value);
}
})
.setNegativeButton("取消", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
}).show();
return true;
}
}
}
3.HTML通过JS读取Android联系人并显示
该代码实现的是通过js读取Android手机中联系列表,然后显示到HTML中 当我们点击某个电话号码时,会直接跳转到拨号页面 实现关键： 利用onload()在网页加载的时候加载相应的js脚本,而js脚本中定义的一个函数是 取出传递过来的对象,获取里面的数据,通过for循环以单元行的形式打印出来！
实现代码：
往assets文件夹下编写要给demo3.html文件，内容如下：
显示获取的联系人列表
| 用户id | 姓名 | 号码 |
再写一个业务类Contact.java：
/**
* Created by Jay on 2015/9/11 0011.
*/
public class Contact {
private String id;
private String name;
private String phone;
public Contact(){}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
@Override
public String toString() {
return this.id + "~" + this.name + "~" + this.phone;
}
}
再写一个业务类Contact.java：
public class MainActivity extends AppCompatActivity {
private WebView wView;
@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//设置WebView的相关设置,依次是:
//支持js,不保存表单,不保存密码,不支持缩放
//同时绑定Java对象
wView = (WebView) findViewById(R.id.wView);
wView.getSettings().setJavaScriptEnabled(true);
wView.getSettings().setSaveFormData(false);
wView.getSettings().setSavePassword(false);
wView.getSettings().setSupportZoom(false);
wView.getSettings().setDefaultTextEncodingName("UTF-8");
wView.addJavascriptInterface(new SharpJS(), "sharp");
wView.loadUrl("file:///android_asset/demo3.html");
}
//自定义一个Js的业务类,传递给JS的对象就是这个,调用时直接javascript:sharp.contactlist()
public class SharpJS {
public void contactlist() {
try {
System.out.println("contactlist()方法执行了！");
String json = buildJson(getContacts());
wView.loadUrl("javascript:show('" + json + "')");
} catch (Exception e) {
System.out.println("设置数据失败" + e);
}
}
public void call(String phone) {
System.out.println("call()方法执行了！");
Intent it = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
startActivity(it);
}
}
//将获取到的联系人集合写入到JsonObject对象中,再添加到JsonArray数组中
public String buildJson(List contacts)throws Exception
{
JSONArray array = new JSONArray();
for(Contact contact:contacts)
{
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", contact.getId());
jsonObject.put("name", contact.getName());
jsonObject.put("phone", contact.getPhone());
array.put(jsonObject);
}
return array.toString();
}
//定义一个获取联系人的方法,返回的是List的数据
public List getContacts()
{
List Contacts = new ArrayList();
//①查询raw_contacts表获得联系人的id
ContentResolver resolver = getContentResolver();
Uri uri = ContactsContract.CommonDataKinds.Phone.CONTENT_URI;
//查询联系人数据
Cursor cursor = resolver.query(uri, null, null, null, null);
while(cursor.moveToNext())
{
Contact contact = new Contact();
//获取联系人姓名,手机号码
contact.setId(cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID)));
contact.setName(cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)));
contact.setPhone(cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)));
Contacts.add(contact);
}
cursor.close();
return Contacts;
}
}
注意：Android4.2后，只有添加 @JavascriptInterface 声明的Java方法才可以被JavaScript调用
所有的WebView方法都应该在同一个线程程中调用
上面内容原文地址：http://www.runoob.com/w3cnote/android-tutorial-webview-attention.html
利用WebView调用网页上的JavaScript代码
项目中通过title栏上面空间和js做交互控制H5界面显示跳转：
在WebView中调用Js的基本格式为webView.loadUrl("jsonConfig()");
现有以下这段JavaScript代码：
function jsonConfig() {
var str = JSON.stringify(jsonStr);
window.stub.jsMethod(str);
}
js调用android方法
从API19开始，Android提供了@JavascriptInterface对象注解的方式来建立起Javascript对象和Android原生对象的绑定，提供给JavScript调用的函数必须带有@JavascriptInterface。
编写Java原生方法并用使用@JavascriptInterface注解
//暴露给js的功能接口
public classJavaScriptObject {
//显示吐司
// 如果target 大于等于API 17，则需要加上如下注解
@JavascriptInterface
public void jsMethod(String jsonStr) {
Log.i("AAAAAAAAAAAAA", jsonStr);//返回结果
Gson gson =newGson();
jsonData=gson.fromJson(jsonStr,JsonData.class);
tv_title.setText(jsonData.getTitle());
}
}
2.注册JavaScriptInterface
webView.addJavascriptInterface(newJavaScriptObject(),"stub");
addJavascriptInterface的作用是把this所代表的类映射为JavaScript中的android对象。
3.编写JavaScript代码
function jsonConfig() {
var str = JSON.stringify(jsonStr);
window.stub.jsMethod(str);
}
//JsToJava是内部类，代码在后面。stub是接口名字
mWebView.addJavascriptInterface(new JsToJava(), "stub");
private class JsToJava {
@JavascriptInterface
public void jsMethod(final String jsonStr) {
if (jsonStr != null) {
Log.i(TAG, jsonStr);//返回结果
dataBean = new Gson().fromJson(jsonStr, ServiceDataEntity.class);
if (dataBean != null) {
titleBar.post(new Runnable() {
@Override
public void run() {
setRightButton();
}
});
}
} else {
titleBar.setRightMenuVisible(false);
}
onClickBackButton();
}
}
//设置右边按钮和标题
private void setRightButton() {
titleBar.setTitle(dataBean.getTitle());
if (dataBean.getBtn2() != null) {
if (dataBean.getBtn2().getImgname().contains("icon_add")) {
titleBar.setRightIcon(R.mipmap.icon_more);
titleBar.setRightMenuVisible(true);
titleBar.setOnRightClick(v -> mWebView.loadUrl("javascript:added()"));
} else if (dataBean.getBtn2().getImgname().contains("icon_more_detail")) {
titleBar.setRightIcon(R.mipmap.icon_more_detail);
titleBar.setRightMenuVisible(true);
titleBar.setOnRightClick(v -> showPopupWindow());
} else if (dataBean.getBtn2().getImgname().contains("icon_me")) {
titleBar.setRightIcon(R.mipmap.icon_me);
titleBar.setRightMenuVisible(true);
titleBar.setOnRightClick(v -> mWebView.loadUrl("javascript:my()"));
} else {
titleBar.setRightMenuVisible(false);
}
} else {
if (dataBean.getBtn3() != null) {
if (dataBean.getBtn3().getImgname().contains("icon_add")) {
titleBar.setRightIcon(R.mipmap.icon_more);
titleBar.setRightMenuVisible(true);
titleBar.setOnRightClick(v -> mWebView.loadUrl("javascript:added()"));
} else if (dataBean.getBtn3().getImgname().contains("icon_more_detail")) {
titleBar.setRightIcon(R.mipmap.icon_more_detail);
titleBar.setRightMenuVisible(true);
titleBar.setOnRightClick(v -> showPopupWindow());
} else if (dataBean.getBtn3().getImgname().contains("icon_me")) {
titleBar.setRightIcon(R.mipmap.icon_me);
titleBar.setRightMenuVisible(true);
titleBar.setOnRightClick(v -> mWebView.loadUrl("javascript:my()"));
}
} else {
titleBar.setRightMenuVisible(false);
}
}
}