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 ...
随机推荐
- 简单上手nodejs调用c++(c++和js的混合编程)
因为项目的原因,最近经常使用node.js搭RESTful接口. 性能还是很不错啦,感觉比Spring Boot之类的要快.而且在不错的性能之外,只要程序结构组织好,别让太多的回调把程序结构搞乱,整体 ...
- MongoDB Export & Import
在使用MongoDB数据库的过程中,避免不了需要将数据进行导入和导出的工作,下面为具体的用法.注意 不同的数据库版本可能存在略微的差异,所以在使用时,先查看 --help 来进行确认.下面的为3.6版 ...
- 【Java基础】【22IO(其他流)&Properties】
22.01_IO流(序列流)(了解) 1.什么是序列流 序列流可以把多个字节输入流整合成一个, 从序列流中读取数据时, 将从被整合的第一个流开始读, 读完一个之后继续读第二个, 以此类推. 2.使用方 ...
- leetcode — gas-station
/** * Source : https://oj.leetcode.com/problems/gas-station/ * * There are N gas stations along a ci ...
- 基于Dockerfile镜像制作的基本操作
一.使用Dockerfile制作镜像 前面的博客中已经介绍了如何基于容器制作镜像,此方法的原理是使用一个正在运行的容器,根据生产所需进行配置更改等操作后,使其满足生产环境,再将这个容器打包制作为镜像, ...
- (摘)使用 .NET Core 实现依赖关系注入
为什么使用依赖关系注入? 使用 .NET,通过 new 运算符(即,new MyService 或任何想要实例化的对象类型)调用构造函数即可轻松实现对象实例化.遗憾的是,此类调用会强制实施客户端(或应 ...
- 手机端input[type=date]的placeholder不起作用
<div class="input clearfix"> <label class="fl">起始日期</label> &l ...
- java servlet的执行流程
1.先附上代码如下 Servlet1.java public class Servlet1 implements Servlet { @Override public void init(Servle ...
- Linux设备驱动之IIO子系统——Triggered buffer support触发缓冲支持
Triggered buffer support触发缓冲支持 在许多数据分析应用中,能够基于某些外部信号(触发器)捕获数据是比较有用的. 这些触发器可能是: 数据就绪信号 连接到某个外部系统的IRQ线 ...
- vue2.x 在引用插件的时候，npm run dev跑正常 ，npm run build 报错vue-cli Unexpected token: punc (() [
这是因为,引用的插件在node_modules里,并不在vue-cli的es6编译范围内,所以语法报错,修改方法: