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()

webview与h5交互

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

WebView详解与简单实现Android与H5互调

原文链接:http://blog.csdn.net/qq_24530405/article/details/52067474 为什么要学习Android与H5互调?微信,QQ空间等大量软件都内嵌了H5...

WebView和H5的那点事

在iOS开发中好多时候,原生的app会很大的限制,也会有好多难以实现的东西。那就需要与H5进行混合开发,那就使用到了webView。 一、首先简单介绍一下webView: 1、三种加载方式:- (...

Android中使用WebView加载H5页面的方法

1、AndroidManifest.xml中必须加权限,否则会出Web page not available错误。 2、如果访问的页面中有Javascript,则webview必须设置支持J...

WebView详解与简单实现Android与H5互调

混合开发就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发。 优势:使用H5实现的功能能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运...

Android js和native交互的两种方法

本博客解决的问题是Android本地方法和webview中js方法交互,方法一是使用的是Android自身js注解,方法二是开源库jockeyjs。方法一:js注解先上js脚本(代码来自网络): ...

Android中Js与Java互调

挺帅的移动开发专栏  http://blog.csdn.net/wangtingshuai/article/details/8631835        在android的开发过程中,有很多时候...

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

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

安卓原生与H5交互用户丢失(Cookie丢失)现象解决方案

最近几天做了一个项目,是原生和界面混合开发的,登录界面用的原生的登录,通过接口获取Json数据,然后获取到服务器的jsessionid,然后通过webView去加载界面。这里就需要给webView设置...

android WebView 和 HttpClient cookie同步

首先android5.0 实现了WebView与 框架的自动cookie同步,无需额外操作。 5.0一下版本需要手动同步cookie 方法如下CookieSyncManager.createInsta...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webview和h5的交互
举报原因:
原因补充:

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