webview和h5的交互

原创 2016年08月31日 11:41:28
现在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()
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Android的webView和h5+js交互

Android的webView和h5+js交互现在开发越来越多的遇到Android本地代码和h5和js交互,于是写了个小demo记录一下,效果图如下:上面图里里面的上面包括返回都是一个webView,...

android webview H5开发若干问题之问题三:android和js交互问题

安卓和js的交互,无非就是安卓的java调用js方法,js调用安卓本地java方法。 先来一遍大家都知道的规则。 安卓本地调用js:     js调用安卓方法。在这方面呢,我的理解是安卓本地用java...

Android利用WebView与h5交互的几种形式

1Android利用WebView与h5交互的几种形式 1.android中利用webview调用网页上的js代码。 Android 中可以通过webview来实现和js的交互,在程序中调用js代码,...

安卓中原生与H5(webview)之间交互时cookie的同步

最近的项目中使用了H5页面和原生之间的交互,主要是原生通过js调用webview来加载H5页面,但是在进行通信时,涉及到一个cookie同步的问题,如果没处理好,真的是问题多多,纠结了好久,遇到了不少...

关于webview最详细讲解(包含 h5 和android 交互)

微信,QQ空间等大量软件都内嵌了H5,不得不说是一种趋势。Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来...

android webview设置以及与h5交互

1、设置内部打开浏览器,而不是外部浏览器打开连接,那么必须要重写WebViewClient类里面的shouldOverrideUrlLoading方法:        mWebview.setWeb...

webview与h5交互

android webview与H5的交互 有时方法无响应

基于cordova实现的webview实现与h5的交互

该片文章讲述项目中遇到的问题,以及相关优化细节。 一、项目背景 1、项目需要支持hybrid应用,所以部分提供h5调用的通用js保存在客户端本地。优点有:访问速度快和无需额外数据流量。 2、项目主页都...

android 的webView加载h5,和h5的交互(java和JavaScript的交互)

Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。(通...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)