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. 爬虫利器_you-get

    用Python做爬虫也很久了,今天分享一个轻巧的爬虫库:you-get you-get 是用 Python3写成的视频,图片,音频下载工具,堪称盗链,爬虫神器.其支持的网站,都是直接破解其算法,直接算 ...

  2. Js_特效

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  3. App推荐 | Google Tasks

    前不久,Google推出了一款移动任务管理应用Google Task,在使用2天后,写一下使用感受,并与Google同类产品Keep进行一个对比. 首先欣赏几张官方的App截图 然后来看一下官方的介绍 ...

  4. 《Pro SQL Server Internals, 2nd edition》中CHAPTER 7 Designing and Tuning the Indexes中的Clustered Index Design Considerations一节（译）

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

  5. A1006. Sign In and Sign Out(25)

    25/25,一遍过了,很开心. #include<bits/stdc++.h> using namespace std; struct record{ string id; string ...

  6. Oracle DROPtable以及Truncate table 的简单测试

    1. 一个用户库 有一个业务表比较大 大小是 49g 表的行数为:121546147 一亿两千万行 制作一个虚拟机的快照测试一下 drop table 和 truncate table的性能差距 2. ...

  7. 【JavaService】使用Java编写部署windows服务

    如果你玩windows系统,你对服务这个东西并不会陌生,服务可以帮我们做很多事情,在不影响用户正常工作的情况下,可以完成很多我们需要的需求. 众所周知,微软的visio studio内置的Servic ...

  8. Tether USDT 节点钱包的安装与使用-omni layer

    1 什么是Omni Layer Omni Layer是一种通信协议,它使用比特币区块链实现智能合约,用户货币和分散式点对点交换等功能. Omni Core是基于比特币核心代码库的快速,便携式Omni层 ...

  9. 【设计模式】—— 状态模式State

    前言:[模式总览]——————————by xingoo 模式意图 允许一个对象在内部改变它的状态,并根据不同的状态有不同的操作行为. 例如,水在固体.液体.气体是三种状态,但是展现在我们面前的确实不 ...

  10. 模拟APP存储空间、内存不足情况下软件正常运行

    1.进行临界测试,手机盘空间存满的条件下应用会有何表现: 方法一:adb shell dd if=/dev/zero of=/mnt/sdcard/bigfile 方法二:哆啦A工具生成文件 2.内存 ...