webviewjavascriptbridge android ios,js与ios交互使用WebViewJavascriptBridge如何写多个函数
//js与webview交互初始化
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 = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
//关注按钮点击交互
setupWebViewJavascriptBridge(function (bridge) {
function followChange(data) {
if (data == 1) {
$(".btnFollow").removeClass("btnFollow-yes").addClass("btnFollow-no");
} else {
$(".btnFollow").removeClass("btnFollow-no").addClass("btnFollow-yes");
}
}
$(".btnFollow").click(function () {
var followStaus=1;
if ($(this).is('.btnFollow-no')) {
followStaus=1;
} else {
followStaus=2;
}
bridge.callHandler(
'callMobileHandler',
{"followStaus": followStaus, "deviceType": "ios"},
function (response) {
if(response.followStaus==1){
$(this).removeClass("btnFollow-yes").addClass("btnFollow-no");
}else{
$(this).removeClass("btnFollow-no").addClass("btnFollow-yes");
}
});
});
bridge.registerHandler('callJSHandler', function (data, responseCallback) {
followChange(data.followStaus);
// responseCallback(responseData);
});
//以上代码实现的功能可以正常运行,以下代码实现的功能没有生效
var imgs = document.getElementsByTagName("img");
//传递图片src数组
var imgsSrc=imgs.map(function (value,index) {
return value.src
});
bridge.callHandler(
'callMobileHandler',//名称待换
{"imgList": imgsSrc, "deviceType": "ios"},//参数待换
function (response) {//假设返回的src数组为imgList
for(var i = 0;i< response.imgList.length; i++){
imgs[i].src=response.imgList[i];
}
});
//js注册函数,没用可删除
/*bridge.registerHandler('callJSHandler', function (data, responseCallback) {
responseCallback(responseData);
});*/
//图片点击事件
for(var i = 0;i< imgs.length; i++){
imgs[i].onclick(function(){
bridge.callHandler(
'callMobileHandler',//名称待换
{"currentImg": imgs[i].src, "deviceType": "ios"},//参数待换
function (response) {
//内容待写
});
//js获得ios端参数函数,没用可删除
/*bridge.registerHandler('callJSHandler', function (data, responseCallback) {
responseCallback(responseData);
});*/
});
}
});
我想问一下我想写多个callhandle函数,是应该调用多次这个桥接函数呢,还是在一个函数里重复写几遍呢,或者是其他方法?目前只有第一个功能实现了,剩下的传递图片数组和图片点击事件都没有传递过去,该怎么办?
webviewjavascriptbridge android ios,js与ios交互使用WebViewJavascriptBridge如何写多个函数相关推荐
- iOS: JS和Native交互的两种方法,iosjsnative交互
iOS: JS和Native交互的两种方法,iosjsnative交互 背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)string ...
- iOS JS与OC交互
iOS JS与OC交互 本文内容导航 1.`UIWebView` JS 与 OC 交互 1.1 OC 调用 JS 函数 1.1.1 OC 拼接 JS 字符串调用 JS 方法 1.1.2 使用 JSCo ...
- Android极简的js与java交互库一一SimpleJavaJsBridge
今日科技快讯 根据相关报道,本月底旧版本Uber中国App将全面停止在中国的服务.内部人士透露,所有的Uber中国司机也正在被转移到滴滴司机的平台上,月底会全部转移完成. 另外滴滴出行新成立了一个部门 ...
- iOS js oc相互调用(JavaScriptCore)(二)
http://blog.csdn.net/lwjok2007/article/details/47058795 上节地址 http://blog.csdn.net/lwjok2007/article/ ...
- Android开发之android与JS互调 | Android与H5互调(附源码)
我们先看下JS代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- iOS下JS和原生交互,函数互调
现在越来越多的APP都是H5和原生混合开发,这样确实方便快捷,但是H5的部分总避免不了很多与原生的交互,原生调JS函数还比较简单,原生的API函数stringByEvaluatingJavaScrip ...
- index android js,reactjs – React Native项目没有index.ios.js或index.android.js
首先确保您已完成以下下载: > Java Sdk > Android Studio > Xcode(如果是OSX) > HomeBrew(在OSX的情况下安装节点) >节 ...
- video.js android,VideoJS + HTML5自动播放失败,适用于Android 2.3+和IOS 4+
我的VideoJS和HTML5项目针对更新的Web浏览器(较新版本的FireFox和Chrome)以及移动浏览器(Android2.3 +和IOS4 +).VideoJS + HTML5自动播放失败, ...
- android 监听 h5 window,H5嵌入APP后,通过window.WebViewJavascriptBridge原生APP与H5之间交互...
下面从H5的角度记录交互思路: 1:安卓环境和ios环境稍微有点不同,需要根据navigator.userAgent判断一下当前环境 2:仍然是APP环境不同,安卓需要进行兼容性判断,如果不存在win ...
最新文章
- 2021年春季学期-信号与系统-第十二次作业参考答案-第四小题
- Android 仿微信小视频录制
- 数据库连接池技术,c3p0
- [私]-optee的同步方法
- @RequestParam和@RequestBody
- golang string 加号连接性能慢_面试必备:浅析C#性能优化的若干种方法
- 目前8岁女儿上的课程
- iterator总结(未完)
- java线程--object.waitobject.notify
- ▲▲▲▲▲▲▲▲▲▲▲yum源的配置(本地和ftp)▲▲▲▲▲▲▲▲▲▲▲▲▲v...
- python实现PDF文件合并成一个文件
- ES的同义词、扩展词、停止词热更新方案
- 太极图形html5代码,HTML5 Canvas组件绘制太极图案
- 设计模式 装饰者模式 带你重回传奇世界
- win10 excel和ppt变成英文了,word正常,怎么解决?
- Linux中tar和scp
- 同学,你的系统吐司可能需要修复一下
- 路由器和调制解调器的区别_如何重新启动路由器和调制解调器
- 我国企业履行社会责任的措施
- 如何用html5制作抽奖游戏,原生js实现抽奖小游戏