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)

用户喜欢...

IBM解析2018年最流行的五项IoT趋势

2017年,物联网技术(loT)为传统行业带来了变革的风声和兴奋的议论。这是一场实质性的转变。我们已经能够看到,几乎所有的行业都在投资物联网,而且其中的佼佼者已经开始迅速采取行...


神经网络从原理到实现

1.简单介绍 在机器学习和认知科学领域,人工神经网络(artificial neural network,缩写ANN),简称神经网络(neural network,缩写NN)或类神经网络,是一种模仿生物神经网络(动物的中枢神经系统,...


自动扫地机器人好用吗?智能特性全面解析

生活在如今这样一个节奏快、工作压力大的时代,我们的压力也是越发的大了,但是人类的智慧是强大的,智能家居...


unity静态批处理原理理解

1、静态批处理的时间点 1)在游戏导出的时候,在player setting中勾选static batching,这样在导出包的时候就进行批处理,导出来的包就会比较大 2 ) 在游戏场景中勾选场景物体的static选项,在加...


统计模式识别的原理与方法

1 统计模式识别的原理与方法简介 1.1 模式识别 什么是模式和模式识别? 广义地说,存在于时间和空间中可观察的事物,如果可以区别它们是否相同或相似,都可以称之为模式;狭义地说,模...


深度解析FPGA四大设计要点

FPGA的用处比我们平时想象的用处更广泛,原因在于其中集成的模块种类更多,而不仅仅是原来的简单逻辑单元(LE)。早期的FPGA相对比较简单,所有的功能单元仅仅由管脚、内部buffer、LE、RAM构...


图像识别的原理、过程、应用前景,精华篇!

图像识别技术是信息时代的一门重要的技术,其产生目的是为了让计算机代替人类去处理大量的物理信息。随着计算机技术的发展,人类对图像识别技术的认识越来越深刻。图像识别技术的过...


从图像到知识:深度神经网络实现图像理解的原理解析

摘要:本文将详细解析深度神经网络识别图形图像的基本原理。针对卷积神经网络,本文将详细探讨网络中每一层在图像识别中的原理和作用,例如卷积层(convolutional layer),采样层(pooling la...


51单片机之独立按键和矩阵键盘(概念及原理)

1.按键分类与输入原理 按键按照结构原理科分为两类,一类是触点式开关按键,如机械式开关、导电橡胶式开关灯;另一类是无触点式开关按键,如电气式按键,磁感应按键等。前者造价低,...


浅谈深度学习的技术原理及其在计算机视觉的应用

目前,深度学习几乎成了计算机视觉领域的标配,也是当下人工智能领域最热门的研究方向。计算机视觉的应用场景和深度学习背后的技术原理是什么呢?下面让我们来一探究竟。 计算机视...