ios和安卓H5交互桥接
ios交互
demo1(摘自网络)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body{
background-color:paleturquoise;
} button{
border:0;
width: 150px;
height: 35px;
background-color: orangered;
color: white;
font-size: 16px;
border-radius: 6px;
}
</style>
</head> <body>
<h2>JS调用OC中的方法</h2>
<button id="btn">访问OC相册</button>
<button id="btn1">调用OC提示窗</button>
<p></p>
</body>
<script>
// 这段代码是固定的，必须要放到js中
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
} // 与OC交互的所有JS方法都要在这里注册,才能让OC和JS之间相互调用
setupWebViewJavascriptBridge(function(bridge) { /* JS给OC提供公开的API, 在OC中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */ // 获取用户信息
bridge.registerHandler('getUserInfo', function(data, responseCallback) {
console.log("OC中传递过来的参数:", data);
// 把处理好的结果返回给OC
responseCallback({"userID":"DX001", "userName":"旋之华", "age":"18", "otherName":"旋之华"})
}); // 弹框输出（这里的数据是ios端返回的值）
bridge.registerHandler('alertMessage', function(data, responseCallback) {
alert(data);
}); // 动态跳转到京东商城
bridge.registerHandler('pushToNewWebSite', function(data, responseCallback) {
window.location.href = data.url;
}); bridge.registerHandler('insertImgToWebPage', function(data, responseCallback) { var img = document.createElement('img');
img.src = data.url;
img.width = 200;
document.body.appendChild(img); }); /* OC给JS提供公开的API, 在JS中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */ // 调用OC中的打开相册方法（传数据给ios）
document.getElementById('btn').onclick = function () {
bridge.callHandler('openCamera', {'count':'10张'}, function responseCallback(responseData) {
console.log("OC中返回的参数:", responseData)
});
}; document.getElementById('btn1').onclick = function () {
bridge.callHandler('showSheet', '', function responseCallback(responseData) {
console.log("OC中返回的参数:", responseData)
});
};
})
</script>
</html>
demo2
//**********************
/*苹果设备回调*/
//注册WebViewJavascriptBridge
// 这段代码是固定的，必须要放到js中
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
function testClick1(code,msg,page) {
//JS代码
// 与OC交互的所有JS方法都要在这里注册,才能让OC和JS之间相互调用
setupWebViewJavascriptBridge(function(bridge) {
// 弹框输出（获得返回的数据）
bridge.registerHandler('alertMessage', function(data, responseCallback) {
if(data.code==0){
$('.tip').html('<span class="gr">注册成功，3秒后自动跳转</span>');
$('.register').unbind('click');
setTimeout(function(){
window.location.href='/Login/index.html';
},3000);
}else{
$('.tip').html('<span class="re">'+data.tishi+'</span>');
}
});
//JS换行
//获得Button
/*苹果方法调用传递数据*/（传递数据给ios）
//JS代码调用OC"mpTestObjcCallBack"的Handler,并传递参数{'foo': 'bar'} 如果有回调还会显示出来
bridge.callHandler('mpTestObjcCallBack',{code:code,msg:msg,page:page}, function(response) {
console.log('JS获得OC返回的结果：', response);
// alert(data);
});
});
}
demo2调用
var maincode='0',
host = window.location.host,
mainmsg = {url:'http://'+host,phone:phone,type:1,pwd:pwd,yzm:yzm},
page = 'register';//页面名称
testClick1(maincode,mainmsg,page);
安卓交互
参考自
https://github.com/lzyzsd/JsBridge
调用java方法实行
var maincode='0',
host = window.location.host,
mainmsg = {url:'http://'+host,phone:phone,type:2,pwd:pwd,yzm:yzm},
page = 'register';//页面名称
testClick(maincode,mainmsg,page);
/*安卓回调app设备(发消息给安卓)*/
function testClick(code,msg,page) {
var data = {code:code,msg:msg,page:page};
window.WebViewJavascriptBridge.send(
data
, function(responseData) {
document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
}
);
}
//安卓发消息给h5，方法注册
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
connectWebViewJavascriptBridge(function(bridge) {
/*安卓方调用方法*/
bridge.registerHandler("functionInJs", function(data, responseCallback) {
alert(data);
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
});
})
ios和安卓H5交互桥接的更多相关文章
- JS与IOS、安卓的交互
最近做的项目中涉及到了与安卓和ios的交互问题,对于一个新手来说,多多少少会有点迷糊.在调用安卓和ios的callback回调时,很轻松的就调用成功了,而且,步骤也不那么繁琐.刚开始,只知道那样使用可 ...
- iOS JavaScriptCore与H5交互时出现异常提示
在利用JavaScriptCore与H5交互时出现异常提示: This application is modifying the autolayout engine from a background ...
- 内嵌页js与ios和安卓的交互
ios: 一个iframe,改变url会发送一个请求,把url设置成就是bridge://xxxxx客户端就可以拦截请求,并在全局变量xxxxx中取出一个字符串.例如{event:'click'},可 ...
- iOS 开发与H5交互(JavaScriptCore框架的使用)
现在的iOS项目中嵌入了越来越多的Web界面,当然是为了方便,那么为了迎合这一趋势,作为iOS开发程序员,我们必须要了解怎么样用OC去和这些Web界面进行交互.这里介绍的是JavaScriptCore ...
- iOS原生与H5交互
一.WKWebView WKWebView 初始化时,有一个参数叫configuration,它是WKWebViewConfiguration类型的参数,而WKWebViewConfiguration ...
- webview和H5交互
由于H5的灵活多变,动态可配的特点,也为了避免冗长 的审核周期,H5页面在app上的重要性正日益突显. iOS应用于H5交互的控件主要是UIWebView及WKWebView WKWebView是14 ...
- WebViewJavascriptBridge详细使用 iOS与H5交互的方案
WebViewJavascriptBridge详细使用 源网址: https://www.cnblogs.com/jiang-xiao-yan/p/5345755.html 前言 WebView ...
- iOS与H5交互
H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互.技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回,反向可以处理异步回调 ...
- iOS原生APP和H5交互-delegate和第三方
一.原生代码中直接加载页面(拦截) 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)we ...
随机推荐
- SpringBoot入门教程(十六)@Autowired、@Inject、@Resource
@Resource,@Autowired,@Inject 这3种都是用来注入bean的,它们属于不同的程序中.详情参见下表: v区别 ANNOTATION PACKAGE SOURCE 作用域 实现方 ...
- 带着萌新看springboot源码04
继续开头说些废话,我也不知道什么鬼,每次写着写着经常会写到其他地方去了,太容易分神了. 这次说一下springboot对于springmvc的大概整个流程,以请求动态网页为例 . 1.梳理一下spri ...
- centos6.5-vsftp搭建
我的机子是默认是没有的vsftp. yum install -y vsftp 创建账户专为ftp而生.useradd ftp01 更改账户不可登录系统.usermod -s /sbin/nologin ...
- 全图化引擎(AI·OS)中的编译技术
全图化引擎又称算子执行引擎,它的介绍可以参考从HA3到AI OS -- 全图化引擎破茧之路.本文从算子化的视角介绍了编译技术在全图化引擎中的运用.主要内容有: 1. 通过脚本语言扩展通用算子上的用户订 ...
- Docker最全教程——从理论到实战（四）
往期内容链接 https://www.cnblogs.com/codelove/p/10030439.html https://www.cnblogs.com/codelove/p/10036608. ...
- 一文读懂Https的安全性原理、数字证书、单项认证、双项认证等
本文引用了作者Smily(博客:blog.csdn.net/qq_20521573)的文章内容,感谢无私分享. 1.前言 目前苹果公司已经强制iOS应用必须使用HTTPS协议开发(详见<苹果即将 ...
- 解析JavaScrip之对象属性
对于面向对象编程语言(如java,.net,php,python等)来说,其最大的特点在于“面向对象”,而"面向对象"较为显著的特征便是:封装,继承,多态.借助”面向对象“的这些特 ...
- c#中的Unity容器
DIP是依赖倒置原则:一种软件架构设计的原则(抽象概念).依赖于抽象不依赖于细节 IOC即为控制反转(Inversion of Control):传统开发,上端依赖(调用/指定)下端对象,会有依赖,把 ...
- C# string数组转int数组（转载）
C# string数组转int数组 用法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //字符串数组(源数组) string[] sNums = new[] {"1 ...
- Java开发笔记（六十八）从泛型方法探究泛型的起源
前面介绍各种容器之时,通过在容器名称后面添加包裹数据类型的一对尖括号,表示该容器存放的是哪种类型的元素.这样一来总算把Java当中的各类括号都凑齐了,例如包裹一段代码的花括号.指定数组元素下标的方括号 ...