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. 3dmax2020下载安装3dmax2020破解中文版下载安装

    3dmax在室内设计.建筑设计领域是最专业的效果图制作软件,也是在游戏动画等领域中在场景方面最专业的软件,目前最新3dmax2020版本已出,我分享亲测好用的软件包,拿走不谢! 3dmax2020安装 ...

  2. 利用matlab写一个简单的拉普拉斯变换提取图像边缘

    可以证明,最简单的各向同性微分算子是拉普拉斯算子.一个二维图像函数 f(x,y) 的拉普拉斯算子定义为 ​ 其中,在 x 方向可近似为 ​ 同理,在 y 方向上可近似为 ​ 于是 我们得到满足以上三个 ...

  3. ats透明代理

    透明代理是拦截客户端和服务器之间的连接而不可见的代理能力(比如ats). 必须要有一个网关设备,所有网络流量都通过该设备从客户端传递到Internet(或外部云).网关负责有效的将ATS拼接到该流量的 ...

  4. k8s之使用secret获取私有仓库镜像

    一.前言 其实这次实践算不上特别复杂,只是在实践过程中遇到了一些坑,以及填坑的方法是非常值得在以后的学习过程中参考借鉴的 二.知识准备 1.harbor是一个企业级的镜像仓库,它比起docker re ...

  5. kaggle 欺诈信用卡预测——Smote+LR

    from:https://zhuanlan.zhihu.com/p/30461746 本项目需解决的问题 本项目通过利用信用卡的历史交易数据,进行机器学习,构建信用卡反欺诈预测模型,提前发现客户信用卡 ...

  6. SCRUM 12.16

    今天大家又聚在一起开了个小会. 我们的爬虫出现了一些问题.某些美团的网页无法爬取,现在正在努力工作中. 关于用户统计的功能我们的以部分成员依然在完善中,17.18号应该基本能够推出. 成员 任务 彭林 ...

  7. “北航Clubs” Beta版本开发目标

    Beta版本开发目标 总体设想:修复Alpha版本中的若干bug,并在Alpha版本成果之上进行进一步开发,实现社员管理.评论.站内信等功能. 1.对Alpha版本功能的更新与加强 后端实现从SQLi ...

  8. pdf修复

    pdf工具下载地址: 链接:https://pan.baidu.com/s/1SgGSrH7apX64hQEl732wWg 提取码:kg5q 使用说明: 1.含注册命令,先注册再运行.

  9. Mac 绑定Gitlab或者GitHub帐号，从新生成公钥

    1.SSH(Secure Shell)是一种安全协议,在你的电脑与GitLab服务器进行通信时,我们使用SSH密钥(SSH Keys)认证的方式来保证通信安全. 2.创建 SSH密钥,并将密钥中的公钥 ...

  10. js弹出层学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...