android或ios：app与html5通信解决方案

下面只是前端示例代码，后端代码请参考：

  1. git https://github.com/marcuswestin/WebViewJavascriptBridge
  2. ios http://www.jianshu.com/p/feec40aff59a?utm_campaign=hugo&utm_medium=reader_share&utm_content=note
  3. android http://www.jianshu.com/p/b3d120753bbb
<html>

    <head>

        <meta content="text/html; charset=utf-8" http-equiv="content-type">

        <title>

            js调用java

        </title>

    </head>

    <body>

        <p>

            <xmp id="show">

            </xmp>

        </p>

        <p>

            <xmp id="init">

            </xmp>

        </p>

        <p>

            <input type="text" id="text1" value="用户名(username)" />

        </p>

        <p>

            <input type="text" id="text2" value="password" />

        </p>

        <p>

            <input type="button" id="enter" value="发消息给Native" onclick="testClick();"

            />

        </p>

        <p>

            <input type="button" id="enter1" value="调用Native方法" onclick="testClick1();"

            />

        </p>

        <p>

            <input type="button" id="enter2" value="显示html" onclick="testDiv();" />

        </p>

        <p>

            <input type="file" value="打开文件" />

        </p>

    </body>

    <script>

        function testDiv() {

            document.getElementById("show").innerHTML = document.getElementsByTagName("html")[0].innerHTML;

        }

        function testClick() {

            var str1 = document.getElementById("text1").value;

            var str2 = document.getElementById("text2").value;

            //send message to native

            var data = {id: 1, content: "这是一个图片 <img src=\"a.png\"/> test\r\nhahaha"};

            window.WebViewJavascriptBridge.send(

                data

                , function(responseData) {

                    document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData

                }

            );

        }

        function testClick1() {

            var str1 = document.getElementById("text1").value;

            var str2 = document.getElementById("text2").value;

            //call native method

            window.WebViewJavascriptBridge.callHandler(

                'submitFromWeb'

                , {'param': '中文测试'}

                , function(responseData) {

                    document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData

                }

            );

        }

        function bridgeLog(logContent) {

            document.getElementById("show").innerHTML = logContent;

        }

        function connectWebViewJavascriptBridge(callback) {

            if (window.WebViewJavascriptBridge) {

                callback(WebViewJavascriptBridge)

            } else {

                document.addEventListener(

                    'WebViewJavascriptBridgeReady'

                    , function() {

                        callback(WebViewJavascriptBridge)

                    },

                    false

                );

            }

        }

        connectWebViewJavascriptBridge(function(bridge) {

            bridge.init(function(message, responseCallback) {

                console.log('JS got a message', message);

                var data = {

                    'Javascript Responds': '测试中文!'

                };

                console.log('JS responding with', data);

                responseCallback(data);

            });

            bridge.registerHandler("functionInJs", function(data, responseCallback) {

                document.getElementById("show").innerHTML = ("data from Java: = " + data);

                var responseData = "Javascript Says Right back aka!";

                responseCallback(responseData);

            });

        })

    </script>

</html>

WebViewJavascriptBridge测试示例的更多相关文章

  1. 【转】Oracle索引列NULL值引发执行计划该表的测试示例

    有时开发进行表结构设计,对表字段是否为空过于随意,出现诸如id1=id2,如果允许字段为空,因为Oracle中空值并不等于空值,有可能得到意料之外的结果.除此之外,最关键的是,NULL会影响oracl ...

  2. cdh5.7权限测试示例

    转载请注明出处:http://www.cnblogs.com/xiaodf/ 本文旨在展示CDH基于Kerberos身份认证和基于Sentry的权限控制功能的测试示例. 1. 准备测试数据 cat / ...

  3. WPF命中测试示例(二)——几何区域命中测试

    原文:WPF命中测试示例(二)--几何区域命中测试 接续上次的命中测试,这次来做几何区域测试示例. 示例 首先新建一个WPF项目,在主界面中拖入一个按钮控件,并修改代码中的以下高亮位置: 当前设计视图 ...

  4. WPF命中测试示例(一)——坐标点命中测试

    原文:WPF命中测试示例(一)--坐标点命中测试 命中测试也可被称为碰撞测试,在WPF中使用VisualTreeHelper.HitTest()方法实现,该方法用于获取给定的一个坐标点或几何形状内存在 ...

  5. JUnit4 测试示例

    1. JUnit4 测试示例 // Calculator.java public class Calculator{ public int add(int a, int b){ return a + ...

  6. Python+Selenium+Unittest+HTMLTestRunner生成测试报告+发送至邮箱，记一次完整的cnblog登录测试示例，

    测试思路:单个测试集.单个测试汇成多个测试集.运行测试集.生成测试报告.发送至邮箱. 第一步:建立单个测试集,以cnblog登录为例. 测试用例: cnblog的登录测试,简单分下面几种情况:(1)用 ...

  7. 【jmeter】使用jmeter进行测试-示例

    介绍 jmeter主要用于负载测试,详细信息可以参见Google. 这里使用一个简单的示例,来介绍jmeter的使用. 涉及的功能点包括: HTTP HEADER配置 HTTP Request配置 J ...

  8. MySQL返回影响行数的测试示例

    found_rows() : select row_count() : update delete insert 注:需要配合相应的操作一起使用,否则返回的值只是1和-1(都是不正确的值) 示例: d ...

  9. Go语言表组测试示例

    比基本测试多个循环... package main import ( "testing" "net/http" ) const checkMark = &quo ...

随机推荐

  1. OpenCV操作像素

    在了解了图像的基础知识和OpenCV的基础知识和操作以后,接下来我们要做的就对像素进行操作,我们知道了图像的本质就是一个矩阵,那么一个矩阵中存储了那么多的像素,我们如何来操作呢?下面通过几个例子来看看 ...

  2. 《Pro SQL Server Internals, 2nd edition》的CHAPTER 3 Statistics中的Introduction to SQL Server Statistics、Statistics and Execution Plans、Statistics Maintenance(译）

    <Pro SQL Server Internals> 作者: Dmitri Korotkevitch 出版社: Apress出版年: 2016-12-29页数: 804定价: USD 59 ...

  3. Apache Ignite 学习笔记(三): Ignite Server和Client节点介绍

    在前两篇文章中,我们把Ignite集群当做一个黑盒子,用二进制包自带的脚本启动Ignite节点后,我们用不同的客户端连接上Ignite进行操作,展示了Ignite作为一个分布式内存缓存,内存数据库的基 ...

  4. NameNode内存溢出和DataNode请求超时异常处理

    问题背景 春节假期间,接连收到监控程序发出的数据异常问题,赶忙连接上跳板机检查各服务间的状态,发现Datanode在第二台.第三台从节点都掉线了,通过查看Datanode和Namenode运行日志,发 ...

  5. Keras学习笔记。

    1. keras.layers.Dense (Fully Connected Neural NetWork),所实现的运算是output = activation(dot(input, kernel) ...

  6. Resharper简单安装及代码覆盖率的测试

    Resharper简单安装及代码覆盖率的测试 测试环境:VS 2015 专业版 一.下载Resharper 官方链接:https://www.jetbrains.com/resharper/ 点击下载 ...

  7. github优缺点

    以前bitbucket沒有支援git github可以直接在網站上瀏覽push的圖片 github 可以針對code行數直接留言與回覆 github Markdown支援很好 github 的issu ...

  8. git如何删除已经 add 的文件 (如何撤销已放入缓存区文件的修改)

    使用 git rm 命令即可,有两种选择, 一种是 git rm –cached “文件路径”,不删除物理文件,仅将该文件从缓存中删除: 一种是 git rm –f “文件路径”,不仅将该文件从缓存中 ...

  9. Redis分布式锁的实现

    前段时间,我在的项目组准备做一个类似美团外卖的拼手气红包[第X个领取的人红包最大],基本功能实现后,就要考虑这一操作在短时间内多个用户争抢同一资源的并发问题了,类似于很多应用如淘宝.京东的秒杀活动场景 ...

  10. 转帖 IBM要推POWER9，来了解一下POWER处理器的前世今生

    https://blog.csdn.net/kwame211/article/details/76669555 先来说一下最新的POWER 9 在Hot Chips会议上首次提到的IBM Power ...