Android学习笔记_32_通过WebView实现JS代码与Java代码互相通信
1、要实现JS代码与Java代码互相通信，需要通过Android的WebView控件，在视图布局界面引入该控件，代码如下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
</RelativeLayout>
2、准备html界面：
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function show(jsondata){
var jsonobjs = eval(jsondata);
var table=document.getElementById("personTable");
for(var y=0;y<jsonobjs.length;y++){
var tr = table.insertRow(table.rows.length);
var td1=tr.insertCell(0);
td1.align="center";
var td2=tr.insertCell(1);
td2.align="center"; td1.innerHTML=jsonobjs[y].name;
td2.innerHTML="<a href='javascript:contact.call(\""+jsonobjs[y].phone+"\")'>"+jsonobjs[y].phone+"</a>";
}
} </script>
</head>
<body onload="javascript:contact.showContacts()">
<table border="0" cellspacing="0" id="personTable" width="100%">
<tr>
<td width="35%" align="right">姓名</td><td align="center">电话</td>
</tr>
</table>
<a href="javascript:window.location.reload()">刷新</a>
</body>
</html>
在上述代码中类似"javascript:contact.showContacts()"这样的写法，它代表的意思是调用javascript对象contact的showContacts方法。而对象contact就要从后台java代码中获取。
3、在java代码中创建javascript对象：
package com.example.html; import java.util.List; import org.json.JSONArray;
import org.json.JSONObject; import com.example.service.ContactService; import android.net.Uri;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.webkit.WebView; public class MainActivity extends Activity {
private WebView webView;
private ContactService contactService; @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); webView = (WebView) this.findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/contact.html");// 加载html文件
webView.getSettings().setJavaScriptEnabled(true);// 启用javascript // 第一个参数在javascript中的一个对象，第二个参数在javascript中当前对象的变量
webView.addJavascriptInterface(new JSObject(), "contact");
contactService = new ContactService(); } private final class JSObject {
// 显示联系人列表，对于高版本的需要用@JavascriptInterface注释，否则调不到该方法
@JavascriptInterfacepublic void showContacts() {
try {
List<ContactService.Contact> contacts = contactService.getContacts();
JSONArray jsonArray = new JSONArray();
for (ContactService.Contact contact : contacts) {
JSONObject object = new JSONObject();
object.put("name", contact.getUsername());
object.put("phone", contact.getPhone());
jsonArray.put(object);
}
String json = jsonArray.toString();
// 后台调用前台html文件中javascript的方法show
webView.loadUrl("javascript:show('" + json + "')");
} catch (Exception e) {
e.printStackTrace();
}
}
// 打电话
@SuppressWarnings("unused")
public void call(String phone) {
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
startActivity(intent);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
} }
3.1 javascript调用java方法：
上面的内部类JSObject 可以看成是javascript的对象，而contact可以看成是该对象的名称，内部的方法showContacts可以看成javascript对象的方法。因此对于在上述代码中"javascript:contact.showContacts()"的写法表示，执行内部类JSObject
中的方法showContacts。
3.2 java调用javascript方法：
可以通过WebView控件调用，例如：webView.loadUrl("javascript:show('" + json + "')")则表示，调用javascript中的show方法。
二、缓存
WebView中存在着两种缓存：网页数据缓存（存储打开过的页面及资源）、H5缓存（即appcache）。 一、网页缓存 、缓存构成
/data/data/package_name/cache/
/data/data/package_name/database/webview.db
/data/data/package_name/database/webviewCache.db 、缓存模式
较难理解的是以下两个模式：
LOAD_DEFAULT，根据cache-control决定是否从网络上取数据。
LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
如：m.taobao.com的cache-control为no-cache，在模式LOAD_DEFAULT下，无论如何都会从网络上取数据，如果没有网络，就会出现错误页面；在LOAD_CACHE_ELSE_NETWORK模式下，无论是否有网络，只要本地有缓存，都使用缓存。本地没有缓存时才从网络上获取。
m.sina.com.cn的cache-control为max-age=，在两种模式下都使用本地缓存数据。 总结：根据以上两种模式，建议缓存策略为，判断是否有网络，有的话，使用LOAD_DEFAULT，无网络时，使用LOAD_CACHE_ELSE_NETWORK。 、清除缓存
clearCache(boolean)。
CacheManager.clear。高版本中需要调用隐藏API。 、控制大小
无系统API支持。
可选方式：定时统计缓存大小、按时间顺序删除缓存。 二、H5缓存 、缓存构成
根据setAppCachePath(String appCachePath)提供的路径，在H5使用缓存过程中生成的缓存文件。 、缓存模式
无模式选择，通过setAppCacheEnabled(boolean flag)设置是否打开。默认关闭，即，H5的缓存无法使用。 、清除缓存
找到调用setAppCachePath(String appCachePath)设置缓存的路径，把它下面的文件全部删除就OK了。 、控制大小
通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量，默认为Max Integer。
同时，可能通过覆盖WebChromeClient.onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater)来设置缓存超过先前设置的最大容量时的策略。 三、参考网址 以下地址有关于H5缓存的一些内幕，如每个Application只调用一次WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()被忽略等一系列问题，需要仔细阅读和实验。
http://code.google.com/p/android/issues/detail?id=24180
三 webview一些参数和事件的设置：
1) 设置WebView基本信息：
webview.getSettings().setJavaScriptEnabled(true); //如果访问的页面中有Javascript，则webview必须设置支持Javascript。
requestFocus();//触摸焦点起作用
this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);// 取消滚动条
2) 设置WevView要显示的网页：
互联网用：webView.loadUrl("http://www.google.com");
本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets文件中
3) 如果希望点击链接由自己处理，而不是新开Android的系统browser中响应该链接。给WebView添加一个事件监听对象（WebViewClient)并重写其中的一些方法：
shouldOverrideUrlLoading：对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法，并传递参数：按下的url。比如当webview内嵌网页的某个数字被点击时，它会自动认为这是一个电话请求，
会传递url：tel:123,如果你不希望如此可通过重写shouldOverrideUrlLoading函数解决：
4) 另外还有其他一些可重写的方法
4.1 接收到 Http 请求的事件
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
4.2 打开链接前的事件
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; }
这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。 4.3 载入页面完成的事件
public void onPageFinished(WebView view, String url){ }
同样道理，我们知道一个页面载入完成，于是我们可以关闭loading条，切换程序动作。 4.4 载入页面开始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) { }
这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。 通过这几个事件，我们可以很轻松的控制程序操作，一边用着浏览器显示内容，一边监控着用户操作实现我们需要的各种显示方式，同时可以防止用户产生误操作。 5) 如果用webview点链接看了很多页以后，如果不做任何处理，点击系统“Back”键，整个浏览器会调用finish()而结束自身，如果希望浏览的网页回退而不是退出浏览器，需要在当前Activity中处理并消费掉该Back事件。
覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。
public boolean onKeyDown(int keyCoder,KeyEvent event){
if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
webview.goBack(); //goBack()表示返回webView的上一页面
return true;
}
return false;
}
支付宝网页支付
/**
* 网页支付
* @author libin
*
*/
public class AlipayWebActivity extends Activity {
private WebView mWebView;
private static final String TAG = "AlipayWebActivity";
protected static final int PAY_SUCCESS = 20;
protected static final int LOAD_FINISH_CODE = 40;
private static final int DEFAULT_CODE = 50; public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.web);
FactoryUtil.getInstance().addActivity(this); mWebView = (WebView) findViewById(R.id.webview);
mWebView.setBackgroundColor(0); initial(); } @SuppressLint({"SetJavaScriptEnabled", "HandlerLeak"})
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void initial() {
String url = getIntent().getStringExtra("url");
LogUtil.i(TAG, url);
WebSettings webSettings = mWebView.getSettings();
mWebView.requestFocus();
webSettings.setJavaScriptEnabled(true);
mWebView.setFocusable(true);
webSettings.setBuiltInZoomControls(true); mWebView.setScrollBarStyle(0);
if (MobileUtil.getMobileVersion() > 11) {
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
mWebView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int newProgress) {
LogUtil.i(TAG, "newProgress: " + newProgress);
if (newProgress == 100) {
mUihandler.sendEmptyMessage(LOAD_FINISH_CODE);
}
super.onProgressChanged(view, newProgress);
}
}); mWebView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
LogUtil.i(TAG, "URL : " + url);
loadUrl(view, url);
return true;//停止在当前界面
} public void onPageFinished(WebView view, String url) {
LogUtil.i(TAG, "onPageFinished" + url);
//trade_status ： TRADE_FINISHED
if (url.contains("&cmd=success&ptype=url")) {
BaseDialogUtil.alertDialog(AlipayWebActivity.this, "提示信息", "支付成功", false, new BaseDialogUtil.DialogOnClickListener() {
@Override
public void positive(DialogInterface dialoginterface, int id) {
FactoryUtil.getInstance().exit();
} @Override
public void negative(DialogInterface dialog, int id) {
}
});
}
super.onPageFinished(view, url); } public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
LogUtil.i(TAG, "onPageStarted" + url);
}
}); loadUrl(mWebView, url);
} @SuppressLint("HandlerLeak")
private Handler mUihandler = new Handler() {
public void handleMessage(Message msg) {
switch (msg.what) {
case PAY_SUCCESS:
clearCache();
FactoryUtil.getInstance().exit();
break;
case LOAD_FINISH_CODE:
dissDialogGamm();
break;
case DEFAULT_CODE:
showProgress(AlipayWebActivity.this);
}
super.handleMessage(msg);
}
}; private void loadUrl(final WebView webView, final String url) { mUihandler.sendEmptyMessage(DEFAULT_CODE);
webView.loadUrl(url); } public boolean onKeyDown(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
mWebView.goBack();
return true;
} else if (keyCode == KeyEvent.KEYCODE_BACK) {
onBackPressed();
return true;
}
return super.onKeyDown(keyCode, event);
} private void clearCache() {
mWebView.clearCache(true);
mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
finish();
}
}
Android学习笔记_32_通过WebView实现JS代码与Java代码互相通信的更多相关文章
- 【转】Pro Android学习笔记（二三）：用户界面和控制（11）：其他控件
目录(?)[-] Chronometer计时器控件 倒计时CountDownTimer Switch控件 Space控件 其他控件 Android提供了很多控件,基本上都是view的扩展. Chron ...
- Android 学习笔记之Volley(七)实现Json数据加载和解析...
学习内容: 1.使用Volley实现异步加载Json数据... Volley的第二大请求就是通过发送请求异步实现Json数据信息的加载,加载Json数据有两种方式,一种是通过获取Json对象,然后 ...
- Android学习笔记进阶之在图片上涂鸦(能清屏)
Android学习笔记进阶之在图片上涂鸦(能清屏) 2013-11-19 10:52 117人阅读 评论(0) 收藏 举报 HandWritingActivity.java package xiaos ...
- android学习笔记36——使用原始XML文件
XML文件 android中使用XML文件,需要开发者手动创建res/xml文件夹. 实例如下: book.xml==> <?xml version="1.0" enc ...
- Android学习笔记之JSON数据解析
转载:Android学习笔记44:JSON数据解析 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种 ...
- udacity android 学习笔记: lesson 4 part b
udacity android 学习笔记: lesson 4 part b 作者:干货店打杂的 /titer1 /Archimedes 出处:https://code.csdn.net/titer1 ...
- Android学习笔记36：使用SQLite方式存储数据
在Android中一共提供了5种数据存储方式,分别为: (1)Files:通过FileInputStream和FileOutputStream对文件进行操作.具体使用方法可以参阅博文<Andro ...
- Android学习笔记之Activity详解
1 理解Activity Activity就是一个包含应用程序界面的窗口,是Android四大组件之一.一个应用程序可以包含零个或多个Activity.一个Activity的生命周期是指从屏幕上显示那 ...
- Pro Android学习笔记 ActionBar（1）：Home图标区
Pro Android学习笔记(四八):ActionBar(1):Home图标区 2013年03月10日 ⁄ 综合 ⁄ 共 3256字 ⁄ 字号 小 中 大 ⁄ 评论关闭 ActionBar在A ...
随机推荐
- 【python爬虫】利用selenium和Chrome浏览器进行自动化网页搜索与浏览
功能简介:利用利用selenium和Chrome浏览器,让其自动打开百度页面,并设置为每页显示50条,接着在百度的搜索框中输入selenium,进行查询.然后再打开的页面中选中“Selenium - ...
- mongodb连接失败原因排查
安装了mongodb,添加了管理员root和test数据库的用户rex,并且开启的用户认证. 按照说明文档连接mongodb数据库:$mongo = new Mongo("mongodb:/ ...
- Linux文本处理工具
Linux文本处理工具 Linux中熟练的使用文本处理工具非常的重要, 因为Linux在设计的时候是采用一切皆文件的哲学的, 甚至连计算机中的配置也都使用伪文件系统来表示, 要查询里面的内容就是对文件 ...
- nyoj 104——最大和——————【子矩阵最大和】
最大和 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 给定一个由整数组成二维矩阵(r*c),现在需要找出它的一个子矩阵,使得这个子矩阵内的所有元素之和最大,并把这个 ...
- bzoj 5302: [Haoi2018]奇怪的背包
Description Solution 首先 \(v_1,v_2,v_3...v_n,P\) 能够构成的最小数是 \(gcd(P,v_1,v_2,v_3...v_n)\) 然后 \(gcd(P,v_ ...
- 【IP】Linux中检测IP地址冲突
在Windows系统中,如果本地网络IP地址出现冲突,会出现图标提示. 在Linux系统中,并没有提供相关的功能,如果本地网络采用静态IP地址配置,出现比较奇怪的网络连接问题,如ssh连接复位,可以考 ...
- node express formidable 文件上传后修改文件名
//我是用php的思想来学习nodejs var express = require('express'); var router = express.Router(); var fs = requi ...
- 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)
1.两个select 内容互换 <!DOCTYPE html><html> <head> <meta charset="UTF- ...
- JavaWeb_01_html基本学习
*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...
- vim右键粘贴 等杂
putty连上linux,vim编辑个文件,我去,右键不能用用上下面的命令,就好了. set mouse-=a 今天发现mysql倒入utf-8的文件网站显示出来都是乱码,不过用utf-8的控制台看是 ...