webview和h5的交互

来源：互联网发布：电子日历制作软件编辑：程序博客网时间：2024/05/22 02:03

现在APP中经常会发现很多很多的H5页面，所以webview与js的交互显得非常重要：

一.理论：

在交互这块我们会涉及到两个场景：一种是h5直接调用原生的，这个时候在原生这边登录成功后，我们会执行一段协商好的js代码，callback传递一些参数返回给h5；另外一种是原生登录成功后，服务端会返回给我们cookie，并利用框架的属性把这个cookie进行持久化，这样下次请求的时候则自带用户cookie，在请求url的时候我们在链接中拼接uid和token。

二.实例：

1. android中的java代码调用webview里面的js脚本：

要点：只需调用webview的loadUrl方法即可

- // 启用javascript
- contentWebView.getSettings().setJavaScriptEnabled(true);
- // 从assets目录下面的加载htmlb
- contentWebView.loadUrl("file:///android_asset/wst.html");
-
-               // 无参数调用
-        contentWebView.loadUrl("javascript:javacalljs()");

2.webview中的js脚本调用本地的java代码：

要点：先对webview绑定javascriptInterface,js脚本通过这个接口来调用java代码，javainterface实际就是一个普通的java类，里面是我们本地的java代码，

将object传递给webview，并指定别名，这样js脚本就可以通过我们给的这个别名来调用我们的方法，在上面的代码中，this是一个实例化的对象，wst是这个对象在js中的别名。

          - contentWebView.addJavascriptInterface(this, "wst");

3.java代码调用JS并传递参数：

要点：只需在待用js函数的时候加入参数即可，在传递一个参数的时候，需注意的是str类型在传递的时候参数要用单引号括起来

          mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函数test()的参数

4.JS调用java并传递参数：

要点：java函数正常书写，在js脚本中调用的时候需要参数统一

          - <div id='b'><a onclick="window.wst.clickOnAndroid(2)">b.c</a></div>

其中值得注意的是各个参数均需要相互对应，这个例子的协议是：window.wst.clickOnAndroid(....),如果在代码中实现了clickOnAndroid(...)方法

看下例子：

WebViewActivity.class

      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            contentWebView = (WebView) findViewById(R.id.webview);
            msgView = (TextView) findViewById(R.id.msg);
            // 启用javascript
            contentWebView.getSettings().setJavaScriptEnabled(true);
            // 从assets目录下面的加载html
            contentWebView.loadUrl("file:///android_asset/wst.html");

            Button button = (Button) findViewById(R.id.button1);
            button.setOnClickListener(btnClickListener);
            contentWebView.addJavascriptInterface(this, "wst");
      }

      OnClickListener btnClickListener = new Button.OnClickListener() {
            public void onClick(View v) {
                  // 无参数调用
                  contentWebView.loadUrl("javascript:javacalljs()");
                  // 传递参数调用
                  contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
            }
      };

      public void startFunction() {
            Toast.makeText(this, "js调用了java函数", Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {

                  @Override
                  public void run() {
                        msgView.setText(msgView.getText() + "\njs调用了java函数");

                  }
            });
      }

      public void startFunction(final String str) {
            Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {

                  @Override
                  public void run() {
                        msgView.setText(msgView.getText() + "\njs调用了java函数传递参数：" + str);

                  }
            });
      }

wst.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <script type="text/javascript">
function javacalljs(){
       document.getElementById("content").innerHTML +=
         "<br\>java调用了js函数";
}

function javacalljswithargs(arg){
       document.getElementById("content").innerHTML +=
         ("<br\>"+arg);
}

    </script>
</head>
<body>
this is my html <br/>
<a onClick="window.wst.startFunction()">点击调用java代码</a><br/>
<a onClick="window.wst.startFunction('hello world')">点击调用java代码并传递参数</a>
<br/>
<div id="content">内容显示</div>
</body>
</html>

以上这个例子的协议是：window.wst.startFunction()

0 0