Android与Html5交互

Android与html5之间可以相互交互，即android中的类可以调用JavaScript中的函数，javascript可以调用android中的类的方法。

这个例子中，html5完成数据库的操作，包括数据库的创建、表的创建、数据的增删查改等，还有html5的定位功能。

先看效果图：

Android与Html5交互_第1张图片

布局文件：main.xml

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Buttonandroid:id="@+id/button"android:layout_width="wrap_content"
android:layout_height="wrap_content"android:text="SendToJavaScript"/>
<TextViewandroid:id="@+id/textview"android:layout_width="fill_parent"
android:layout_height="wrap_content"android:text="androiditme"/>
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>

html5文件：index.html

[html] view plain copy

<!DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scriptlanguage="javascript"type="text/javascript">
//初始化数据库
functioninitDatabase(){
try{
if(!window.openDatabase){
alert('Databasesarenotsupportedbyyourbrowser');
}else{
varshortName='YARINDB';
varversion='1.0';
vardisplayName='yarindb';
varmaxSize=100000;//inbytes
YARINDB=openDatabase(shortName,version,displayName,maxSize);
createTables();
selectAll();
}
}catch(e){
if(e==2){
//Versionmismatch.
console.log("Invaliddatabaseversion.");//调试用，在控制台输出字符串
}else{
console.log("Unknownerror"+e+".");
}
return;
}
}
functioncreateTables(){
YARINDB.transaction(
function(transaction){
transaction.executeSql('CREATETABLEIFNOTEXISTSyarin(idINTEGERNOTNULLPRIMARYKEY,nameTEXTNOTNULL,descTEXTNOTNULL);',[],nullDataHandler,errorHandler);
}
);
insertData();
}
functioninsertData(){
YARINDB.transaction(
function(transaction){
//Starterdatawhenpageisinitialized
vardata=['1','yarinyang','Iamyarin'];
vardata1=['2','JasonChoi','Iamagraduatestudent!'];
transaction.executeSql("INSERTINTOyarin(id,name,desc)VALUES(?,?,?)",[data[0],data[1],data[2]]);
transaction.executeSql("INSERTINTOyarin(id,name,desc)VALUES(?,?,?)",[data1[0],data1[1],data1[2]]);
}
);
}
functionerrorHandler(transaction,error){
if(error.code==1){
//DBTablealreadyexists
}else{
//Errorisahuman-readablestring.
console.log('Oops.Errorwas'+error.message+'(Code'+error.code+')');
}
returnfalse;
}
functionnullDataHandler(){
console.log("SQLQuerySucceeded");
}
functionselectAll(){
YARINDB.transaction(
function(transaction){
transaction.executeSql("SELECT*FROMyarin;",[],dataSelectHandler,errorHandler);
}
);
}
functiondataSelectHandler(transaction,results){
//Handletheresults
for(vari=0;i<results.rows.length;i++){
varrow=results.rows.item(i);
varnewFeature=newObject();
newFeature.name=row['name'];
newFeature.decs=row['desc'];
document.getElementById("name").innerHTML="name:"+newFeature.name;
document.getElementById("desc").innerHTML="desc:"+newFeature.decs;
}
}
functionupdateData(){
YARINDB.transaction(
function(transaction){
vardata=['xiaominghuang','notatall'];
transaction.executeSql("UPDATEyarinSETname=?,desc=?WHEREid=2",[data[0],data[1]]);
}
);
selectAll();
}
functionddeleteTables(){
YARINDB.transaction(
function(transaction){
transaction.executeSql("DROPTABLEyarin;",[],nullDataHandler,errorHandler);
}
);
console.log("Table'page_settings'hasbeendropped.");
}
//定位
functionget_location(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:false,maximumAge:1000,timeout:15000});
}else{
alert("YourbrowserdoesnotsupportHTML5geoLocation");
}
}
functionshow_map(position){
varlatitude=position.coords.latitude;
varlongitude=position.coords.longitude;
varcity=position.coords.city;
//telnetlocalhost5554
//geofix-82.41162928.054553
//geofix-121.4535646.511194392
//geonmea$GPGGA,001431.092,0118.2653,N,10351.1359,E,0,00,,-19.6,M,4.1,M,,0000*5B
document.getElementById("Latitude").innerHTML="latitude:"+latitude;
document.getElementById("Longitude").innerHTML="longitude:"+longitude;
document.getElementById("City").innerHTML="city:"+city;
}
functionhandle_error(err){
switch(err.code){
case1:
alert("permissiondenied");
break;
case2:
alert("thenetworkisdownorthepositionsatellitescan'tbecontacted");
break;
case3:
alert("timeout");
break;
default:
alert("unknownerror");
break;
}
}
functioninitLocalStorage(){
if(window.localStorage){
textarea.addEventListener("keyup",function(){
window.localStorage["value"]=this.value;
window.localStorage["time"]=newDate().getTime();
},false);
}else{
alert("LocalStoragearenotsupportedinthisbrowser.");
}
}
window.onload=function(){
initDatabase();
initLocalStorage();
get_location();
}
</script>
<scriptlanguage="javascript"type="text/javascript">
functiongetFromAndroid(str){//接收来自android的数据
document.getElementById("android").innerHTML=str;
}
functionsendToAndroid(){
console.log("!!!!!!!!!I'msendingtoandroid!!!!!!!!!");
varstr="thedataisfromJavaScript!";
window.injs.runOnAndroidJavaScript(str);//通过injs接口调用android的函数
}
functionale()
{
alert("Thisisanalert!");
}
</script>
</head>
<body>
<div><inputtype="submit"name="Submit"value="alert"onclick="ale()"/></div>
<inputtype="button"value="SendToAndroid"onclick="sendToAndroid()"/>
<divid="android">JavaScriptitme</div>
<textareaid="textarea"></textarea>
<inputtype='button'value='get'onClick="alert(window.localStorage['value']+':'+window.localStorage['time'])"/>
<divid="name"></div>
<divid="desc"></div>
<inputtype="button"value="updateData"onclick="updateData()"/>
<divid="Latitude"></div>
<divid="Longitude"></div>
<divid="City"></div>
</body>
</html>

android类：MainActivity.class

[java] view plain copy

packagecom.yarin.android.html5;
importandroid.app.Activity;
importandroid.app.AlertDialog;
importandroid.app.AlertDialog.Builder;
importandroid.content.Context;
importandroid.content.DialogInterface;
importandroid.graphics.Bitmap;
importandroid.os.Bundle;
importandroid.os.Handler;
importandroid.view.KeyEvent;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.view.Window;
importandroid.webkit.GeolocationPermissions;
importandroid.webkit.JsResult;
importandroid.webkit.WebChromeClient;
importandroid.webkit.WebSettings;
importandroid.webkit.WebStorage;
importandroid.webkit.WebView;
importandroid.webkit.WebViewClient;
importandroid.widget.Button;
importandroid.widget.TextView;
//关于android2.3中javascript交互的问题
//http://code.google.com/p/android/issues/detail?id=12987
publicclassMainActivityextendsActivity{
privateWebViewwebView=null;
privateHandlerhandler=newHandler();
privateButtonbutton=null;
finalclassInJavaScript{
publicvoidrunOnAndroidJavaScript(finalStringstr){
handler.post(newRunnable(){
publicvoidrun(){
TextViewshow=(TextView)findViewById(R.id.textview);
show.setText(str);
}
});
}
}
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
button=(Button)findViewById(R.id.button);
button.setOnClickListener(newOnClickListener(){
publicvoidonClick(Viewarg0){
//调用javascript中的方法，传入string数据
webView.loadUrl("javascript:getFromAndroid('thedataisfromandroid!')");
}
});
webView=(WebView)findViewById(R.id.webview);
//把本类的一个实例添加到js的全局对象window中，
//这样就可以使用window.injs来调用它的方法
webView.addJavascriptInterface(newInJavaScript(),"injs");
//设置支持JavaScript脚本
WebSettingswebSettings=webView.getSettings();
webSettings.setJavaScriptEnabled(true);
//设置可以访问文件
webSettings.setAllowFileAccess(true);
//设置支持缩放
webSettings.setBuiltInZoomControls(true);
webSettings.setDatabaseEnabled(true);
Stringdir=this.getApplicationContext().getDir("database",Context.MODE_PRIVATE).getPath();
webSettings.setDatabasePath(dir);
//使用localStorage则必须打开
webSettings.setDomStorageEnabled(true);
webSettings.setGeolocationEnabled(true);
//webSettings.setGeolocationDatabasePath(dir);
//设置WebViewClient
webView.setWebViewClient(newWebViewClient(){
publicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){
view.loadUrl(url);
returntrue;
}
publicvoidonPageFinished(WebViewview,Stringurl){
super.onPageFinished(view,url);
}
publicvoidonPageStarted(WebViewview,Stringurl,Bitmapfavicon){
super.onPageStarted(view,url,favicon);
}
});
//设置WebChromeClient
webView.setWebChromeClient(newWebChromeClient(){
//处理javascript中的alert
publicbooleanonJsAlert(WebViewview,Stringurl,Stringmessage,finalJsResultresult){
//构建一个Builder来显示网页中的对话框
Builderbuilder=newBuilder(MainActivity.this);
builder.setTitle("Alert");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,
newAlertDialog.OnClickListener(){
publicvoidonClick(DialogInterfacedialog,intwhich){
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
returntrue;
};
//处理javascript中的confirm
publicbooleanonJsConfirm(WebViewview,Stringurl,Stringmessage,finalJsResultresult){
Builderbuilder=newBuilder(MainActivity.this);
builder.setTitle("confirm");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,
newAlertDialog.OnClickListener(){
publicvoidonClick(DialogInterfacedialog,intwhich){
result.confirm();
}
});
builder.setNegativeButton(android.R.string.cancel,
newDialogInterface.OnClickListener(){
publicvoidonClick(DialogInterfacedialog,intwhich){
result.cancel();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
returntrue;
};
@Override
//设置网页加载的进度条
publicvoidonProgressChanged(WebViewview,intnewProgress){
MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS,newProgress*100);
super.onProgressChanged(view,newProgress);
}
//设置应用程序的标题title
publicvoidonReceivedTitle(WebViewview,Stringtitle){
MainActivity.this.setTitle(title);
super.onReceivedTitle(view,title);
}
publicvoidonExceededDatabaseQuota(Stringurl,
StringdatabaseIdentifier,longcurrentQuota,
longestimatedSize,longtotalUsedQuota,
WebStorage.QuotaUpdaterquotaUpdater){
quotaUpdater.updateQuota(estimatedSize*2);
}
publicvoidonGeolocationPermissionsShowPrompt(Stringorigin,
GeolocationPermissions.Callbackcallback){
callback.invoke(origin,true,false);
super.onGeolocationPermissionsShowPrompt(origin,callback);
}
publicvoidonReachedMaxAppCacheSize(longspaceNeeded,
longtotalUsedQuota,WebStorage.QuotaUpdaterquotaUpdater){
quotaUpdater.updateQuota(spaceNeeded*2);
}
});
//覆盖默认后退按钮的作用，替换成WebView里的查看历史页面
webView.setOnKeyListener(newView.OnKeyListener(){
publicbooleanonKey(Viewv,intkeyCode,KeyEventevent){
if(event.getAction()==KeyEvent.ACTION_DOWN){
if((keyCode==KeyEvent.KEYCODE_BACK)
&&webView.canGoBack()){
webView.goBack();
returntrue;
}
}
returnfalse;
}
});
webView.loadUrl("file:///android_asset/index.html");
}
}

更多相关文章

随机推荐