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. 如何在Windows Server 2003搭建Windows+iis+asp+access环境

    前提系统盘镜像要加载进来方案一:开始->管理您的服务器->添加或删除角色->下一步->自定义配置->下一步->选择应用程序服务器(IIS,ASP.NET)-> ...

  2. 区块链--Bitcoin共识机制

    目录 中心化和去中心化 比特币共识机制 拜占庭将军共识机制 比特币成功解决了拜占庭问题 中心化和去中心化 中心化模式: 优点:效率高 缺点:中间层次太多(组织层次连接) 去中心化模式: 缺点:效率低 ...

  3. extjs几个奇怪的错误

    在用Extjs进行网页开发的时候,遇见了一下两个错误,这两个错误的位置用firebug调试显示在extjs-all.js Ext.resetElement is undefined g.el is n ...

  4. css之3D变换

    3D变换的x,y,z轴是分别效果是: x轴旋转的话,就是头和脚进行转动 y轴旋转的话,就是左右手进行转动 z轴旋转的话,就是整个身体平铺在旋转. 上面是针对旋转的意思去,但是对于其他的类似一样,就是这 ...

  5. 微软必应词典UWP -2017春

    必应UWP调研,评测 软件平台:windows10 软件名称:微软必应词典 软件类型:UWP Bug Bug1 当在文本框中进行输入时,在谷歌拼音输入法状态下,无法使用Shift键切换到谷歌拼音的纯英 ...

  6. PAT 甲级 1078 Hashing

    https://pintia.cn/problem-sets/994805342720868352/problems/994805389634158592 The task of this probl ...

  7. 使用maven的插件进行maven项目的打包

    1 maven项目打包的插件有3种 maven-jar-plugin maven-assembly-plugin maven-shade-plugin 2 maven-jar-plugin 现在要新增 ...

  8. poj3468 A Simple Problem with Integers（线段树/树状数组）

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  9. 启动studio报错Gradle error

    在安装cuba studio后,启动时出现了以下错误: Gradle error The version of Gradle you are using does not support the Bu ...

  10. 洛谷P4338 [ZJOI2018]历史（LCT，树形DP，树链剖分）

    洛谷题目传送门 ZJOI的考场上最弱外省选手T2 10分成功滚粗...... 首先要想到30分的结论 说实话Day1前几天刚刚刚掉了SDOI2017的树点涂色,考场上也想到了这一点 想到了又有什么用? ...