close
当前位置: 物联网在线 > 技术文库 > ios >

WebViewJavascriptBridge原理解析

我们的项目是一个OC与javascript重度交互的app,OC与javascript交互的那部分是在 的基础上修改的,WebViewJavascriptBridge应该是当前最流行最成功的OC与Web交互实现了。最近看了一下他的实现原理,顺便也为后面项目扩展打下基础。

为了简化讲解过程,我忽略了UIWebView的实现过程,只解析WKWebView的实现过程。

我们可以在OC中调用javascript方法,但是反过来不能在javascript中调用OC方法。所以 WebViewJavascriptBridge 的实现过程就是在OC环境和javascript环境各自保存一个相互调用的信息。每一个调用之间都有id和callbackid来找到两个环境对应的处理。下图是我对于每个类的讲解:

WebViewJavascriptBridge原理解析

nouse文件夹下面的文件是与UIWebView相关的东西,我们暂时不管,基本原理和WKWebView一样。其中 WebViewJavascriptBridge_JS.m 中是javascript代码,为了方便理解,我直接新建了一个 WebViewJavascriptBridge_JS.js 文件来代替,方便后面解析。

WebViewJavascriptBridge_JS.js 文件中是javascript环境的bridge初始化和处理,里面负责接收oc发给javascript的消息,并且把javascript环境的消息发送给oc。

WKWebViewJavascriptBridge.m 主要负责OC环境的消息处理,并且把OC环境的消息发送给javascript环境。

WebViewJavascriptBridgeBase.m 主要实现了OC环境的bridge初始化和处理。

ExampleApp.html 主要用于模拟生产环境下的web端。

初始化过程 1、OC环境初始化

我们从OC环境的初始化开始。

//初始化一个OC环境的桥WKWebViewJavascriptBridge并且初始化。 + (instancetype)bridgeForWebView:(WKWebView*)webView { WKWebViewJavascriptBridge* bridge = [[self alloc] init]; //调用下面那个方法 [bridge _setupInstance:webView]; [bridge reset]; return bridge; } //初始化 - (void) _setupInstance:(WKWebView*)webView { _webView = webView; _webView.navigationDelegate = self; _base = [[WebViewJavascriptBridgeBase alloc] init]; _base.delegate = self; } //messageHandlers用于保存OC环境注册的方法,key是方法名,value是这个方法对应的回调block //startupMessageQueue用于保存是实话过程中需要发送给javascirpt环境的消息。 //responseCallbacks用于保存OC于javascript环境相互调用的回调模块。通过_uniqueId加上时间戳来确定每个调用的回调。 - (id)init { if (self = [super init]) { self.messageHandlers = [NSMutableDictionary dictionary]; self.startupMessageQueue = [NSMutableArray array]; self.responseCallbacks = [NSMutableDictionary dictionary]; _uniqueId = 0; } return self; }

所有与javascript之间交互的信息都存储在 messageHandlers 和 responseCallbacks 中。这两个属性记录了OC环境与javascript交互的信息。

2、OC环境注册方法

注册一个OC方法 OC提供方法给JS调用 给javascript调用,并且把他的回调实现保存在 messageHandlers 中。

[_bridge registerHandler:@"OC提供方法给JS调用" handler:^(id data, WVJBResponseCallback responseCallback) { //NSLog(@"testObjcCallback called: %@", data); responseCallback(@"OC发给JS的返回值"); }]; - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler { _base.messageHandlers[handlerName] = [handler copy]; } 3、Web环境初始化

加载Web环境的html,这里就是 ExampleAPP.html 文件,我删除了非关键部分。

function setupWebViewJavascriptBridge(callback) { //第一次调用这个方法的时候,为false if (window.WebViewJavascriptBridge) { var result = callback(WebViewJavascriptBridge); return result; } //第一次调用的时候,也是false if (window.WVJBCallbacks) { var result = window.WVJBCallbacks.push(callback); return result; } //把callback对象赋值给对象。 window.WVJBCallbacks = [callback]; //这段代码的意思就是执行加载WebViewJavascriptBridge_JS.js中代码的作用 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 callback(bridge) { var uniqueId = 1 //把WEB中要注册的方法注册到bridge里面 bridge.registerHandler('OC调用JS提供的方法', function(data, responseCallback) { log('OC调用JS方法成功', data) var responseData = { 'JS给OC调用的回调':'回调值!' } log('OC调用JS的返回值', responseData) responseCallback(responseData) }) }; //驱动所有hander的初始化 setupWebViewJavascriptBridge(callback);

我们调用 setupWebViewJavascriptBridge 函数,并且这个函数传入的callback也是一个函数。callback函数中有我们在javascript环境中注册的 OC调用JS提供的方法 方法。 setupWebViewJavascriptBridge 的实现过程中我们可以发现,如果不是第一次初始化,会通过 window.WebViewJavascriptBridge 或者 window.WVJBCallbacks 两个判断返回。


(责任编辑:ioter)

用户喜欢...

HiTSDB 时序数据库技术架构和产品解析

作者:场景研读 摘要: 8月24日阿里云数据库技术峰会上,来自阿里数据库事业部高级专家钟宇带来HiTSDB 时序数据库...


解析:阻碍物联网安全的五大因素

物联网安全事件呈爆发增长态势,安全威胁不断恶化。多国开始从战略、标准、监管等各层面提升对物联网安全的重...


【解析】全球物联网平台的发展现状

作为物联网产业生态中的关键组成部分,物联网平台处于万物互联时代软硬结合的枢纽位置:一方面肩负管理底层实...


知识┃最全电机分类及几类电机的原理PPT

cathy 在 周五, 08/18/2017 - 16:14 提交 一、电机的分类 二、几种电机的原理 摘要: 电机:也称电动机(俗称马达),是指依据电磁感应定律实现电能的转换或传递 的一种电磁装置。 它的主要作...


全面解析工业机器人的控制系统

如果工业机器人只有主体和驱动器,机械臂是不能正常工作。原因是传感器输出的信号没有起作用,驱动电动机也得...


解析汽车“电子油门”究竟是怎么回事?

一般而言,增减油门就是指通过油门踏板改变发动机节气门开度,从而控制可燃混合气的流量,改变发动机的转速和...


耳目一新的三极管工作原理讲解

随着科学技的发展,电子技术的应用几乎渗透到了人们生产生活的方方面面。晶体三极管作为电子技术中一个最为基...


10大常见流量计动态原理图及特点

selina 在 周二, 08/15/2017 - 12:18 提交 椭圆流量计 产品特点 1. 其依靠被测介质的压头推动椭圆齿轮旋转而进行计量。 2. 粘度愈大的介质,从齿轮和计量空间隙中泄漏出去的泄漏量愈小,因此核测...


解析无线监护远程医疗系统的设计原理

介绍了一种基于GPRS技术的无线远程医疗监护系统。以SPCE061A为主控芯片,将数据采集模块和GPRS通信模块相结合,以无...


解析烟雾器在银行安防系统升级改造的应用

银行是当今社会货币的主要流通场所,是国家经济运作的重要环节,业务涉及大量的现金、有价证券及贵重物品,因...