[Cordova]JS和Native交互实现关键代码(iOS)

一、JS中定义的exec函数：define("cordova/exec", function(require, exports, module) 。关键实现代码如下：

1.建立command对象，并且将命令推入commandQueue

var command = [callbackId, service, action, actionArgs];

commandQueue.push(JSON.stringify(command));

2.建立不可见的iframe，并且在后续会将此iframe添加的页面

function createExecIframe() {

var iframe = document.createElement("iframe");

iframe.style.display = 'none';

document.body.appendChild(iframe);

return iframe;

}

3.将iframe的链接设置为“gap://ready”,此时网页端会发送一个请求

execIframe = execIframe || createExecIframe();

execIframe.src = "gap://ready";

二、UIWebView中拦截请求

1.CDVViewController中，实现了webview的代理方法：

- (BOOL)webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType

2.当网页端发起iframe中的请求时，请求会被此方法拦截：

if ([[url scheme] isEqualToString:@"gap"]) {

[_commandQueue fetchCommandsFromJs];

return NO;

}

当发现网页链接是gap协议的，此时通过fetchCommandsFromJs方法获取命令对象并执行，并且返回NO。实现的效果：既拦截了命令，而且页面不做变化。

2.fetchCommandsFromJs实现

(1)通过执行js脚本，获取网页端js对象commandQueue中的命令（转换为Json的字符串格式,包含服务名，方法名，以及参数列表）

NSString* queuedCommandsJSON = [_viewController.webView stringByEvaluatingJavaScriptFromString:

@"cordova.require('cordova/exec').nativeFetchMessages()"];

(2)将json字符串解析，并且合成CDVInvokedUrlCommand对象

NSArray* commandBatch = [queuedCommandsJSON JSONObject];

CDVInvokedUrlCommand* command = [[CDVInvokedUrlCommand alloc] initFromJson:commandBatch];

(3)执行Command对象

//通过类名获取plugin实例

CDVPlugin* obj = [_viewController.commandDelegate getCommandInstance:command.className];

//通过方法名创建方法对象

SEL normalSelector = NSSelectorFromString(methodName);

//通过参数字符串列表创建参数列表对象

NSMutableArray* arguments = nil;

NSMutableDictionary* dict = nil;

[command legacyArguments:&arguments andDict:&dict];

//发送消息

objc_msgSend(obj, legacySelector, arguments, dict);

三、Native代码回调JS

1.在plugin的功能方法实现中，我们手动调用如下函数向js页面返回结果

[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];

2.在如上方法的实现中，实现如下：

NSString* js = [NSString stringWithFormat:@"cordova.require('cordova/exec').nativeCallback('%@',%d,%@,%d)", callbackId, status, argumentsAsJSON, keepCallback];

[_viewController.webView stringByEvaluatingJavaScriptFromString:js];

四、总结：经上面的步骤，一个完整的交互流程就实现了。

[Cordova]JS和Native交互实现关键代码(iOS)相关推荐

c html联调,JS与native 交互简单应用
JS与native 交互简单应用一.objectiveC 语法简介二.简易项目浏览器搭建新建项目步骤: 1> DraggedImage.png 2> 2222.png 3> 3 ...
iOS: JS和Native交互的两种方法，iosjsnative交互
iOS: JS和Native交互的两种方法,iosjsnative交互背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)string ...
Cordova工程index.html/index.css/index.js结构及关键代码
Cordova工程index.html/index.css/index.js结构及关键代码 1. index.html 2. index.css (1)横竖屏的判断方法: (2)深色模式适配 3. i ...
cef js返回c++的代码_CEF3开发者系列之外篇——IE中JS与C++交互
使用IE内核开发客户端产品,系统和前端页面之间的交互,通常给开发和维护带来很大的便利性.但操作系统和前端之间的交互却是比较复杂的.具体来说就是脚本语言和编译语言的交互.在IE内核中html和css虽然 ...
【前端基础】Web与Native交互之The JSBridge FAQ
今天我们来简单聊一下JSBridge 为什么要聊JSBridge? 不为什么好吧,JSBridge虽然也算比较古老了,但关于JSBridge的原理也是一个目前作为一名前端开发人员需要了解掌握的知识. ...
Android极简的js与java交互库一一SimpleJavaJsBridge
今日科技快讯根据相关报道,本月底旧版本Uber中国App将全面停止在中国的服务.内部人士透露,所有的Uber中国司机也正在被转移到滴滴司机的平台上,月底会全部转移完成. 另外滴滴出行新成立了一个部门 ...
h5 和native 交互那些事儿
前端菜菜一枚,写下关于h5 和native 交互那些事情.偏前端,各种理论知识,不在赘述.之前有各位大牛已经写过.我只写代码,有问题,下面留言 /* 关于h5 和native 之间的交互 JSBrid ...
H5与Native交互之JSBridge技术
一.原理篇下面分别介绍IOS和Android与Javascript的底层交互原理 IOS 在讲解原理之前,首先来了解下iOS的UIWebView组件,先来看一下苹果官方的介绍: You can us ...
PhoneGap 1.5版本 cordova.js 简析 3（转）
原文:http://peng-jiesi.iteye.com/blog/1494079 在基本升级了phonegap1.5后,发现原有的phonegap插件基本还是能够工作的,而因为项目原因我需要重写 ...

[Cordova]JS和Native交互实现关键代码(iOS)

[Cordova]JS和Native交互实现关键代码(iOS)相关推荐

最新文章

热门文章