js和native交互方法浅析
一、背景
最近接触公司项目,需要和原生app做交互,由此业务需求,开始了学习探索之路。
二、解决方案之WebViewJavascriptBridge
想要和app交互,必须在app上先把bridge进行实例化,这是先决条件。
oc解决方案
步骤
1、引入文件
#import "WebViewJavascriptBridge.h"
@property WebViewJavascriptBridge* bridge;
2、实例化WebViewJavascriptBridge
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
3、在oc中注册一个函数,并调用一个js处理函数
[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
responseCallback(data);
}];
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
NSLog(@"ObjC received response: %@", responseData);
}];
4、把这段js代码放入前端js或者页面中
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
// 创建iframe 对象, 在网页中,iframe的用法非常多,主要应用于伪ajax、嵌套页面、页面重用。
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
//保证前面的代码执行完再删除这个iframe节点,
//setTimeout (fn,0)
//同步代码转异步代码,这是为了手动调配优先级不高的代码靠后执行。保证当前处于事件队列中的任务全部执行完后该任务(函数)立刻得到执行。
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
5、在前端调用
setupWebViewJavascriptBridge(function(bridge) { /* Initialize your app here */ bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
})
API
oc调用js
// OC端 向 JS端 传数据的回调函数, 注册 registerHandler(标识符, 数据回调闭包), 当OC端发起数据传送,会调用 function(数据, OC端给的回调函数) --------->
handlerName要和OC端保持一致
bridge.registerHandler("handlerName", function(responseData) { ... })
js调用oc
bridge.callHandler("handlerName", data)
// JS端 向 OC端 传数据的方式,callHandler(方法标识符, 数据, 回调) ---------->
testObjcCallback
要和OC端保持一致
bridge.callHandler("handlerName", data, function responseCallback(responseData) { ... }) bridge.disableJavscriptAlertBoxSafetyTimeout()
总结
交互前需要先对OC环境和JS环境进行初始化,JS环境的初始化通过Web页面加载时发送特定的URL来完成。
WebViewJavascriptBridge在OC端和JS端各自维护一个bridge对象来保存开放给另一端的方法,以及自身调用另一端后的回调方法。前者通过handlerName来映射,后者通过callBackId标识唯一性。方法调用时必定携带handlerName,若需要回调,还需携带callBackId。
WebViewJavascriptBridge中OC调用JS采用的是WebView提供的JS执行方法;而JS调用OC采用的是URL拦截的方式,OC端通过识别特定的URL来区分是否需要拦截,并做相应的逻辑处理。
android解决方案
安卓版插件传送门https://github.com/gzsll/WebViewJavascriptBridge,原理基本一致,没有深入研究。
思考
WebViewJavascriptBridge还需要做IOS和Android的兼容,那么,还有没有更好的方案呢?功夫不负有心人,我找到了DSBridge
三、解决方案之DSBridge
dsbridge最大的特点就是支持同步!中文文档传送门:https://github.com/wendux/DSBridge-Android/blob/master/readme-chs.md
文章写的比较浅,如有纰漏,欢迎指正,如果有更好方案,欢迎留言。
js和native交互方法浅析的更多相关文章
- js与native交互
js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...
- iOS: JS和Native交互的两种方法
背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)stringByEvaluatingJavaScriptFromString:(NS ...
- html与ios交互方法 WebViewJavascriptBridge
WebViewJavascriptBridge 1.html调用ios的方法 <!DOCTYPE html> <html lang="en"> <he ...
- CEF3开发者系列之JS与C++交互之一
JS与Native交互是相对于比较困难的技术,在学习这门技术之前,我们先了解下浏览器内核中的JS引擎与chromium内核的V8引擎相关知识.在浏览器应用中,JS与本地代码互相调用,得益于浏览器内核对 ...
- Android 和 JS交互方法初探
起初有个需求,就是需要监听网页的图片点击,然后图片单独跳转到另一个页面单独显示 这里就需要用JS和Android Native方法之间的通信 先说上面的解决办法之前先引出两个Android的方法 1: ...
- iOS JS 和 OC交互 / JS 和 native 相互调用
现在app 上越来越多需求是通过UIWebView 来展示html 或者 html5的内容, js 和 native OC代码交互 就非常常见了. js 调用 native OC代码 第一种机制 ( ...
- 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析
作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- js与native的交互
WebView与Javascript交互(Android): WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具 ...
随机推荐
- Paho - MQTT C Cient的实现
来自我的CSDN博客 在前几天,我大致了解了一下Paho C项目,并对其的一些内容进行了翻译.俗话说,光说不练假把戏,今天就给大家讲一下使用Paho的客户端库文件实现MQTT C Client的过 ...
- [置顶]
xamarin android自定义spinner
以前弄的一个下拉框时自带的spinner,感觉好丑,实际效果实在满足不了基本的UI界面要求,还是自己动手丰衣足食,看了网上关于android中自定义spinner的文章,感觉实现原理还是比较简单,所以 ...
- ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步
同一份数据不同视图查看可能用的比较少,因为3D视图放大很多后就和2D地图差不多了,畸变很小,用于超大范围的地图显示时有用,很多时候都是在平面地图上进行分析.查询.操作.教学需要可能会对这个有要求? 本 ...
- bzoj 4345: [POI2016]Korale
Description 有n个带标号的珠子,第i个珠子的价值为a[i].现在你可以选择若干个珠子组成项链(也可以一个都不选),项链的价值为所有珠子的价值和.现在给所有可能的项链排序,先按权值从小到大排 ...
- Zabbix自动发现监控Tomcat进程
1.编辑自动发现脚本 自动发现脚本只支持JSON格式 #!/usr/bin/env python # -*- coding:utf-8 -*- import commands import psuti ...
- sudo 做不到的事
本文是经验帖,以后遇到类似的情况会持续更新到这篇文章 普通用户使用sudo会遇到以下情况 1.字符流无法写入到 /var/log/messages /var/log/secure (实际上这些文件一旦 ...
- Python Pandas 库的使用例子
主要在jupyter notebook里面熟悉这个库的使用,它的安装方法与实现,可自行搜索. Pandas是一个优秀的数据分析工具,官网:http://pandas.pydata.org/ 相关的库使 ...
- 伽罗瓦域(有限域)GFq^12上元素的1→2→4→12塔式扩张(1)------第一次扩张
伽罗瓦域是抽象代数下的域论分支中的内容,这部分想必很多人都比较熟悉,此处不再赘述. 最近,国密算法中的SM2和SM9已经成为国际标准,其中SM9算法在椭圆曲线离散对数难题的基础上,添加了若干个双线性配 ...
- 关于 dos 下 npm 命令的使用
npm install 可以安装模块,后面跟 -g 安装全局的,后面跟包的名字就是安装指定的包 npm uninstall <安装包的名字> 卸载某个包,后面跟 -g 是卸载全局的某个包 ...
- Life in Changsha 第一次scrum冲刺
第一次冲刺任务 基于大局的全面性功能框架定位,要求能实现用户基于自己的需求进行的一系列操作. 用户故事 用户打开“生活在长大”的界面 程序首页展示校园服务,论坛等相关信息 用户选择某个功能 程序界面跳 ...