Android WebView+JSON+JavaScript

来源：互联网发布：两个淘宝店铺怎么关联编辑：程序博客网时间：2024/05/16 17:49

在上一篇Android WebView与JavaScript交互（一）的基础上，增加JSON数据传递，从Android客户端发送数据给html网页，在网页中对数据进行处理。

需要修改的地方：myWebView.java中。

增加变量：

String jsonText = "{\"name\":\"helloworld\",\"password\":\"helloworld\"}";//待传递的json数据

private Handler mHandler = new Handler();

然后增加：mWebView.setWebChromeClient(new MyWebChromeClient());

并重写DemoJavaScriptInterface类。

private final class DemoJavaScriptInterface{

    DemoJavaScriptInterface(){

    }
    //这里的方法是提供给JavaScript调用的。
     public void clickOnAndroid()
    {
      mHandler.post(new Runnable(){

    @Override
    public void run() {
     // TODO Auto-generated method stub
     mWebView.loadUrl("javascript:wave("+jsonText+")");//在这里又调用了JavaScript的方法wave();
    }
      });
    }
    }

    private final class MyWebChromeClient extends WebChromeClient{

  @Override
  public boolean onJsAlert(WebView view, String url, String message,
    JsResult result) {
   // TODO Auto-generated method stub
   result.confirm();
   return true;
  }
    }

最后我们需要修改html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script language="javascript">
        /* This function is invoked by the activity */
        function wave(jsonText) {
            document.getElementById("username").innerHTML="用户姓名："+jsonText.name;
            alert("2");
            document.getElementById("password").innerHTML="密    码："+jsonText.password;
            alert("2");
        }
    </script>
</head>

    <body>这是一个html页面 <br /><br /><br />
    <div id="username" >用户姓名：</div><br />
    <div id="password" >密    码：</div><br /><br />
        <input type="submit" value="发起请求" onclick="window.demo.clickOnAndroid();"/>
    </body>
</html>

0 0