WebView和JS交互

来源:互联网 发布:apache spark源码剖析 编辑:程序博客网 时间:2024/06/06 03:06
 网页代码,登录界面
   <html>   <head>      <meta charset="utf-8" />      <title>登录页面</title>      <script>                function login(){            var uername=document.getElementById("name").value;            var uerpwd=document.getElementById("pwd").value            webview.login(uername,uerpwd);        }               </script>   </head>   <body>      <div align="center">                用户名: <input type="text" id="name"/><br /><br />                密 码: <input type="password" id="pwd"/><br /><br />         <input type="submit" value="登录" onclick="login()" /><br /><br />                  <a href="file:///android_asset/zhuce.html">注册</a>      </div>   </body></html>
网页,注册界面
  <html>   <head>      <meta charset="UTF-8">      <title>注册</title>      <script>                function login(){            var username=document.getElementById("name").value;            var pwd=document.getElementById("pwd").value;//          调用安卓端的方法,把用户名和密码传过去,webview是你自己在安卓代码中注册的名字            webview.ZhuCe(username,pwd);        }                        </script>   </head>   <body>      <div align="center">                用户名 :<input type="text" id="name" /><br /><br />                密 码:<input type="password" id="pwd" /><br /><br />      <input type="submit" value="注册" onclick="login()"/>      </div>   </body></html>

//安卓中的代码
webview = (WebView) findViewById(R.id.webview);        bar = (ProgressBar) findViewById(R.id.progress);        tv = (TextView) findViewById(R.id.textview);        // 设置显示的网页        webview.loadUrl("file:///android_asset/index.html");        // 添加JavaScript,第一个是对象,如果不是当前Activity,其他的类就New一个对象,        // 第二个参数是别名,在Js里面调用方法的时候用的到        webview.addJavascriptInterface(this, "webview");        // 设置webview可以和js进行交互        webview.getSettings().setJavaScriptEnabled(true);        /**         * 自己重写里面的两个方法,可用设置标题和进度条的进度         */        webview.setWebChromeClient(new WebChromeClient() {// 设置页面的标题@Overridepublic void onReceivedTitle(WebView view, String title) {        super.onReceivedTitle(view, title);        tv.setText(title);        }// 设置进度条的进度@Overridepublic void onProgressChanged(WebView view, int newProgress) {        super.onProgressChanged(view, newProgress);        bar.setProgress(newProgress);        }        });        /**         * 可以设置ProgressBar的显示和隐藏         */        webview.setWebViewClient(new WebViewClient() {// 开始的时候让ProgressBar显示@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {        super.onPageStarted(view, url, favicon);        bar.setVisibility(View.VISIBLE);        }// 结束的时候让ProgressBar隐藏@Overridepublic void onPageFinished(WebView view, String url) {        super.onPageFinished(view, url);        bar.setVisibility(View.GONE);        }        });        }@JavascriptInterfacepublic void login(String name, String pwd) {        // 验证账号密码,正确的话就跳转到第二个页面        if (name.equals("张三") && pwd.equals("123")) {        Intent intent = new Intent(MainActivity.this, OtherActivity.class);        startActivity(intent);        }        }@JavascriptInterfacepublic void ZhuCe(String name, String pwd) {        Toast.makeText(this, "用户名:" + name + "    ,密码:" + pwd, 0).show();        // 安卓端调用js端的方法,安卓调用js的弹窗必须在主线程运行        // 如果注册成功跳转回去登录页面,也就是跳转回去上一个页面        if (name.equals("张三") && pwd.equals("123")) {        runOnUiThread(new Runnable() {@Overridepublic void run() {        // 设置返回        if (webview.canGoBack()) {        webview.goBack();        }        }        });        }        }        // 设置可以返回上一个界面   /*@Override   public boolean onKeyDown(int keyCode, KeyEvent event) {      if (keyCode == KeyEvent.KEYCODE_BACK) {         if (webview.canGoBack()) {            webview.goBack();            return true;         }      }      return super.onKeyDown(keyCode, event);   }*/        }

原创粉丝点击