html与Android—

html与Android——webView

 1 <html>
 2   <head>
 3     <title>myHtml.html</title>
 4     
 5     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 6     <meta http-equiv="description" content="this is my page">
 7     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 8     
 9     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
10     <!-- 此处编写JavaScript  --js -->
11     <script language="javascript">
12         //定义函数，验证表单信息是否合法
13         function checkAll(ele){
14             alert(ele);
15             //验证用户名不为空
16             var name = document.getElementById("id1");//得到用户名输入框对象
17             var nameValue = name.value;//得到具體的值
18             if(nameValue.length<=0){//驗證
19 //                     document.getElementById("div1").innerHTML="<font size='4' color='red'>用户名不能为空</font>";
20                 alert("用户名不能为空，请填写");
21                 return;
22             }else{
23                 document.getElementById("div1").innerHTML="";
24             }
25             //驗證密碼
26             var pass = document.getElementById("id2");//得到密码输入框对象
27             var passValue = pass.value;
28             if(passValue.length < 6){
29 //                 document.getElementById("div2").innerHTML="<font size='4' color='red'>密码长度不能小于6位</font>";
30                 alert("密码长度不能小于6位");
31                 return;
32             }else{
33                 document.getElementById("div2").innerHTML="";
34             }
35             //验证邮箱
36             var email = document.getElementById("id3");//得到邮箱输入框对象
37             var emailValue = email.value;
38             if(emailValue.indexOf("@") == -1){
39                 //普通的js代码可以通过设置WebSetting实现有效
40 //                 document.getElementById("div3").innerHTML="<font size='4' color='red'>邮箱不包含@！</font>";
41                 alert("邮箱不包含@，请检查！");//通过webchromClient设置有效
42                 return;
43             }else{
44                 document.getElementById("div3").innerHTML="";
45             }
46             
47             //输入项都符合要求，提交表单,但是做一个确认的提醒
48             if(confirm("确认提交吗？")){
49 //                 document.getElementById("form1").submit();
50                 //把表单中的信息传递到android代码中,通过调用android传递过来的对象myclass
51                 window.myclass.sendData(nameValue,passValue,emailValue);
52             }
53             
54         }
55     
56     </script>
57 
58   </head>
59   
60   <body>
61     <form id="form1" action="success.html">
62     <center>
63         <table >
64             <tr align="center"><td colspan="2"><a href="http://www.baidu.com">百度</a></td></tr>
65             <tr><td>用户名：</td><td width="150"><input type="text" id="id1" name="username"/><div style="display:inline" id="div1"></div></td></tr>
66             <tr><td>密码：</td><td width="150"><input type="password" id="id2" name="userpass"/><div style="display:inline" id="div2"></div></td></tr>
67             <tr><td>邮箱：</td><td width="150"><input type="text" id="id3" name="email"/><div style="display:inline" id="div3"></div></td></tr>
68             <tr ><td align="center" colspan="2"><input type="button" onclick="checkAll('开始验证');" value="提交（app）"/></td></tr>
69         </table>
70     <center>
71     </form>
72   </body>
73 </html>

  1 package com.ch.day9_webviewdemo;
  2 
  3 import java.io.UnsupportedEncodingException;
  4 import java.net.URLEncoder;
  5 import java.security.spec.EncodedKeySpec;
  6 
  7 import android.os.Bundle;
  8 import android.app.Activity;
  9 import android.app.AlertDialog;
 10 import android.content.Context;
 11 import android.content.DialogInterface;
 12 import android.util.Log;
 13 import android.util.Xml.Encoding;
 14 import android.view.Menu;
 15 import android.view.View;
 16 import android.view.View.OnClickListener;
 17 import android.webkit.JavascriptInterface;
 18 import android.webkit.JsResult;
 19 import android.webkit.WebChromeClient;
 20 import android.webkit.WebSettings;
 21 import android.webkit.WebView;
 22 import android.webkit.WebViewClient;
 23 import android.widget.Button;
 24 import android.widget.ExpandableListView;
 25 import android.widget.TextView;
 26 import android.widget.Toast;
 27 
 28 public class MainActivity extends Activity {
 29     private Button goback;
 30     private Button tj;
 31     public static final String HTML_URL = "http://169.254.70.111:8080/serverof1407a/myHtml.html";
 32     
 33     private TextView tv;
 34     private WebView wv;
 35     Context mcontext;
 36     
 37     class MyClass1{
 38         @JavascriptInterface
 39         public void sendData(String name,String pass,String email){
 40             Toast.makeText(mcontext, name+","+pass+","+email, 0).show();
 41             //网络连接，发送到服务器保存，同时也可以保存到本地sqlite
 42             
 43             
 44             
 45             //跳转到注册成功页面
 46 //            Intent it = new Intent(mcontext,第二个页面);
 47         }
 48     }
 49     
 50     @Override
 51     protected void onCreate(Bundle savedInstanceState) {
 52         super.onCreate(savedInstanceState);
 53         setContentView(R.layout.activity_main);
 54         mcontext = this;
 55         init();
 56     }
 57     
 58     public void init(){
 59         wv = (WebView) findViewById(R.id.wv);
 60         goback = (Button) findViewById(R.id.goback);
 61         tj = (Button) findViewById(R.id.tj);
 62         //点击 提交，通过android调用js的checkAll函数
 63         tj.setOnClickListener(new OnClickListener() {
 64             @Override
 65             public void onClick(View v) {
 66                 wv.loadUrl("javascript:checkAll('android调用的验证')");
 67             }
 68         });
 69         
 70         WebSettings setting = wv.getSettings();//获得websetting，设置一些参数
 71         setting.setDefaultTextEncodingName("utf-8");//设置编码，解决乱码

 72         //设置普通js有效
 73         setting.setJavaScriptEnabled(true);
 74         
 75         //第一种方式加载现成的html(两个来源：网络+本地)
 76 //        wv.loadUrl(HTML_URL);//加载服务器的html资源
 77         wv.loadUrl("file:///android_asset/myHtml.html");//加载本地assets下的html
 78         //向js中推入一个对象，供调用
 79         wv.addJavascriptInterface(new MyClass1(), "myclass");
            //解析数据后加载页面
 80        // webView.loadData(string, "text/html;charset=utf-8", "utf-8");
            
 81         //监听webview的url的重新定位
 82         wv.setWebViewClient(new WebViewClient(){
 83             @Override
 84             public boolean shouldOverrideUrlLoading(WebView view, String url) {
 85                 // TODO Auto-generated method stub
 86                 Log.i("TAG", "当前webview加载的新url:::"+url);
 87 //                if(url.equals("http://www.baidu.com/")){
 88 //                    wv.loadUrl("http://www.jd.com");
 89 //                }
 90                 return super.shouldOverrideUrlLoading(view, url);
 91                 
 92             }
 93         });
 94         //处理alert无效
 95         wv.setWebChromeClient(new WebChromeClient(){
 96             //处理alert无效,当js弹出alert框的时候，会调用这个方法
 97             @Override
 98             public boolean onJsAlert(WebView view, String url, String message,
 99                     JsResult result) {
100                 // TODO Auto-generated method stub
101                 //用dialog对话框替代系统自带的alert弹出
102                 result.cancel();//关闭系统和自带的alert警告框
103                 //创建android的对话框替换
104                 AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
105                 dialog.setTitle("警告框").setIcon(R.drawable.ic_launcher).setMessage(message)
106                 .setPositiveButton("确定", null)
107                 .create().show();
108                 
109                 return true;
110             }
111             //处理confirm无效,当js弹出confirm框的时候，会调用这个方法
112             @Override
113             public boolean onJsConfirm(WebView view, String url,
114                     String message, final JsResult result) {
115                 // TODO Auto-generated method stub
116                 
117                 //创建android的对话框替换
118                 AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
119                 dialog.setTitle("确认提示框").setIcon(R.drawable.ic_launcher).setMessage(message)
120                 .setPositiveButton("确定", new DialogInterface.OnClickListener(){
121                     @Override
122                     public void onClick(DialogInterface dialog, int which) {
123                         result.confirm();//点击dailog的确认，提交系统的确认框
124                     }
125                 })
126                 .setNegativeButton("取消", new DialogInterface.OnClickListener(){
127                     @Override
128                     public void onClick(DialogInterface dialog, int which) {
129                         result.cancel();//点击dailog的取消，取消系统的确认框
130                     }
131                 })
132                 .create().show();
133                 return true;
134             }
135         });
136         
137         //
138         goback.setOnClickListener(new OnClickListener() {
139             @Override
140             public void onClick(View v) {
141                 if(wv.canGoBack()){
142                     wv.goBack();//后退
143 //                    wv.goForward();//前进
144 //                    wv.zoomIn();//放大
145 //                    wv.zoomOut();//缩小
146                 }
147                 
148             }
149         });
150         
151         
152         
153 //        //第二种方式加载现拼写的html
154 //        StringBuffer sb = new StringBuffer();
155 //        sb.append("<html><head></head><body><input type='submit' value='提交（app'/></body></html>");
156 //        wv.loadData(sb.toString(), "text/html", "utf-8");
157     }
158 
159     @Override
160     public boolean onCreateOptionsMenu(Menu menu) {
161         // Inflate the menu; this adds items to the action bar if it is present.
162         getMenuInflater().inflate(R.menu.activity_main, menu);
163         return true;
164     }
165 
166 }