Android与H5的交互
16lz
2021-12-04
android与html5之间可以相互交互,即android中的类可以调用javascript中的函数,javascript可以调用android中的类的方法。
这个例子中,html5完成数据库的操作,包括数据库的创建、表的创建、数据的增删查改等,还有html5的定位功能。
先看效果图:
布局文件: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>
[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");
- }
- }
更多相关文章
- Android(安卓)控件使用之SlidingDrawer
- Android(安卓)ImageView 总结【转载】
- Android的布局和Intent笔记和常用实例
- Android旋转屏幕时阻止activity重建
- aidl
- AsyncTask源码剖析(API 23)
- 对Android(安卓)Activity添加容错处理
- Android富文本编辑器
- android 语言设置