WebView和JS交互

最新推荐文章于 2024-05-08 10:07:12 发布

凌云志 !

最新推荐文章于 2024-05-08 10:07:12 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/zhao8856234/article/details/75899076

版权

 	网页代码,登录界面   <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="登录" οnclick="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="注册" οnclick="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() {
// 设置页面的标题
@Override
public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
        tv.setText(title);
        }

// 设置进度条的进度
@Override
public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        bar.setProgress(newProgress);
        }
        });

        /**
         * 可以设置ProgressBar的显示和隐藏
         */
        webview.setWebViewClient(new WebViewClient() {
// 开始的时候让ProgressBar显示
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        bar.setVisibility(View.VISIBLE);
        }

// 结束的时候让ProgressBar隐藏
@Override
public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        bar.setVisibility(View.GONE);
        }
        });

        }

@JavascriptInterface
public void login(String name, String pwd) {
        // 验证账号密码,正确的话就跳转到第二个页面
        if (name.equals("张三") && pwd.equals("123")) {
        Intent intent = new Intent(MainActivity.this, OtherActivity.class);
        startActivity(intent);
        }
        }

@JavascriptInterface
public void ZhuCe(String name, String pwd) {
        Toast.makeText(this, "用户名:" + name + "    ,密码:" + pwd, 0).show();
        // 安卓端调用js端的方法,安卓调用js的弹窗必须在主线程运行
        // 如果注册成功跳转回去登录页面,也就是跳转回去上一个页面
        if (name.equals("张三") && pwd.equals("123")) {
        runOnUiThread(new Runnable() {

@Override
public 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);
   }
*/
        }