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 ...
随机推荐
- .Net Core中的Api版本控制
原文链接:API Versioning in .Net Core 作者:Neel Bhatt 简介 Api的版本控制是Api开发中经常遇到的问题, 在大部分中大型项目都需要使用到Api的版本控制 在本 ...
- asp.net core系列 37 WebAPI 使用OpenAPI (swagger)中间件
一.概述 在使用Web API时,对于开发人员来说,了解其各种方法可能是一项挑战.在ASP.NET Core上,Web api 辅助工具介绍二个中间件,包括:Swashbuckle和NSwag .NE ...
- Python的协程
什么是协程 协程又叫做微线程,它是在单一线程内通过不断切换执行的.协程的切换不是上下文的切换也就是说不是CPU的执行任务的切换,比如CPU执行一会线程1,然后再执行一会线程2,在多核CPU上,Pyth ...
- windows查看端口占用 windows端口占用 查找端口占用程序 强制结束端口占用 查看某个端口被占用的解决方法 如何查看Windows下端口占用情况
windows下查询端口占用情况 ,强制结束端口占用程序 查询8080端口被那个程序占用 如何强制结束windows下端口占用情况? 下面操作在win10下 在控制台执行命令 1.列出所有端口的情 ...
- 痞子衡嵌入式：第一本Git命令教程（7.1）- 清理之缓存(stash)
今天是Git系列课程第七课,上一课我们学会了查看Git本地历史提交,今天痞子衡要讲的是Git仓库的清理操作,一共4个命令,都是日常开发中非常实用的命令,掌握这4个命令,会让你有一种玩弄Git仓库于股掌 ...
- iptables 指南
iptables 是 Linux 内核集成的防火墙系统, 几乎所有 Linux 发行版都会内置 iptables. iptables 对进出的 IP 数据报进行处理和过滤, 过滤规则(rule)存储在 ...
- 第59章 IdentityServer交互服务 - Identity Server 4 中文文档(v1.0.0)
IIdentityServerInteractionService接口旨在提供用户界面用于与IdentityServer通信的服务,主要与用户交互有关.它可以从依赖注入系统获得,通常作为构造函数参数注 ...
- 第44章 添加新协议 - Identity Server 4 中文文档(v1.0.0)
除了对OpenID Connect和OAuth 2.0的内置支持之外,IdentityServer4还允许添加对其他协议的支持. 您可以将这些附加协议端点添加为中间件或使用例如MVC控制器.在这两种情 ...
- Solr学习笔记---部署Solr到Tomcat上，可视化界面的介绍和使用，Solr的基本内容介绍，SolrJ的使用
学习Solr前需要有Lucene的基础 Lucene的一些简单用法:https://www.cnblogs.com/dddyyy/p/9842760.html 1.部署Solr到Tomcat(Wind ...
- vue webpack配置Error
学写慕课网的Vue核心技术Vue+Vue-Router+Vuex+SSR实战精讲时,发现因为webpack,babel等升级了.按照视频的代码配置webpack会出问题. 报错:TypeError: ...