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 ...
随机推荐
- asp.net core系列 27 EF模型配置(索引,备用键,继承)
一.索引 索引是许多数据存储中的常见概念.虽然它们在数据存储中的实现可能会有所不同,但它们可用于更有效地基于列(或列集)进行查找.按照约定,用作外键每个属性 (或组的属性) 会自动创建索引.无法使用数 ...
- 代码实现PHP web服务器下绝对路径到Web网址的转换
代码实现PHP web服务器下绝对路径到Web网址的转换 代码中用到几个系统变量或常量: 1. 路径中各目录分隔字符 DIRECTORY_SEPARATOR(常量),Windows下DIRECTORY ...
- Android--调用系统照相机拍照与摄像
前言 在很多场景中,都需要用到摄像头去拍摄照片或视频,在照片或视频的基础之上进行处理.但是Android系统源码是开源的,很多设备厂商均可使用,并且定制比较混乱.一般而言,在需要用到摄像头拍照或摄像的 ...
- 使用 SetColorFilter 神奇地改变图片的颜色
关键代码如下: colors.xml文件中定义一个颜色值: <color name="permission_dialog_img_color">#000000</ ...
- linux 远程ssh免密登录
写在前面 先说说需求: 我们平时开发.运维操作linux过程中经常需要实现将远程文件拷贝到本地或者本地文件拷贝到远程:执行远程命令等操作:这个时候建立ssh免密登录应该是一个比较好的选择: 原理 在l ...
- spring boot 使用redis进行发布订阅
异步消息的方式有很多,这篇博客介绍如何使用redis进行发布订阅, 完成这个示例只需要三个文件 1.redis消息监听配置 @Configuration public class RedisListe ...
- Java开发知识之Java的包装类
Java开发知识之Java的包装类 一丶什么是包装类 包装类的意思就是对基本数据类型封装成一个类.这些类都是Number的子类.区别就是封装数据类型不同.包含的方法基本相同. 具体可以查询JAVA A ...
- ASP.NET Core使用Jaeger实现分布式追踪
前言 最近我们公司的部分.NET Core的项目接入了Jaeger,也算是稍微完善了一下.NET团队的技术栈. 至于为什么选择Jaeger而不是Skywalking,这个问题我只能回答,大佬们说了算. ...
- vm12 安装ubuntu15.10详细图文教程 虚拟机安装ubuntu安装 ubuntu更新软件 ubuntu一直卡在下载语言怎么办?
1,准备工作-ubuntu下载 ubuntu官网下载 如何官网下载ubuntu http://www.ubuntu.com/download/ 2,打开虚拟机 虚拟机安装ubuntu15.10 虚拟机 ...
- DSAPI多功能组件编程应用-文件类
[DSAPI.DLL下载地址] 本节内容,是属于"无需过多说明"就能使用的功能.由于实在是太简单,我就简单地示例一下. DSAPI.文件类.获取可读性强的字节大小信息(&q ...