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. fastDFS教程Ⅱ-文件服务器迁移

    在实际的项目应用中,由于服务器替换或项目变更难免会存在fastDFS文件服务器迁移的工作.本文重点介绍fastDFS文件系统在不同情况下的文件迁移处理方案. 1.迁移时IP地址不变 通过文件服务器存储 ...

  2. WayOS计费对接（零点计费系统）详细教程

    零点计费系统开发也有两年了,一直都是自己和朋友在使用,今年开始有对外免费开发体验的想法,在此简单介绍一下wayos和零点计费的对接教程. 可到官网www.feidian8.com里面的首页点击查看零点 ...

  3. 在Linux系统中安装caffe

    学习深度学习已经很久了,但一直没有自己动手安装过caffe,因为工作需要,需要在linux系统中安装caffe,因此,在这里对安装过程进行记录. caffe配置起来比tensorflow更麻烦一些,我 ...

  4. 从C简单程序的汇编代码入手，以理解计算机工作原理。

    贺邦  原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000#/info 知识准备 ...

  5. 03-java学习-基本数据类型-运算符-键盘接收用户输入

    java的八大基本数据类型: 类型转换的基本原则: java整数的默认类型是int,小数的默认类型是double 运算符: 算术运算符.连接.赋值.关系.逻辑.三目运算符等…… 键盘接收用户输入: j ...

  6. 从零开始学Kotlin-基础语法（1）

    从零开始学Kotlin基础篇系列文章 注释 //单行注释 /* 多行注释 */ /** * 多行注释 */ 定义变量/常量 变量定义:var 关键字 var <标识符> : <类型& ...

  7. ipmitool+python应用处理大量带外地址

    ipmitool 是一种可用在 linux 系统下的命令行方式的 ipmi 平台管理工具,它支持 ipmi 1.5 规范(最新的规范为 ipmi 2.0),通过它可以实现获取传感器的信息.显示系统日志 ...

  8. [知乎]关于WindowsXPx64SP2系统的说明

    自己简单安装了下发现 winxpsp3x86的系统版本为: 然后windowsXPx64sp2的版本为:   作者:qpi667链接:https://www.zhihu.com/question/29 ...

  9. BZOJ2431 HAOI2009逆序对数列（动态规划）

    对于排列计数问题一般把数按一个特定的顺序加入排列.这个题做法比较显然,考虑将数从小到大加入排列即可. #include<iostream> #include<cstdio> # ...

  10. bzoj1047&bzoj1012

    Description 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. Input 第一行为3个整数,分别表示a,b,n的值第二行至第 ...