http://www.cocoachina.com/ios/20150906/13320.html


最近公司用Ping++集成了第三方支付,并且微信端也集成了这个功能,而微信付款时需要调用原生的支付宝支付或者微信支付,由此引出了JS调用OC方法的问题。

Js -> Native

以前传统的做法是根据url字符串来做特殊匹配,从而完成一些特定的工作譬如

1
2
3
4
5
6
7
8
9
10
11
12
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *requestString = [[request URL] absoluteString];
    NSString *scheme = @"js-pingpp";
    NSString *protocol = [NSString stringWithFormat:@"%@://", scheme];
    if ([requestString hasPrefix:protocol]) {
        //调用相应支付Api
        /*do something*/
        return NO;
    }
    return YES;
}

但是iOS7之后, iOS 7 引入了 JavaScriptCore 库,它把 WebKit 的 JavaScript 引擎用 Objective-C 封装,让JavaScript与Objective-C之间的通信变的非常简单。首先导入JavaScriptCore.framework框架, 然后

JS端:

1
TXBB_IOS_SDK.callPay(charge, this.success, this.cancel);

OC端:

.h中引入头文件,并实现协议和对应的方法

.m中在webViewDidFinishLoad中给context赋值,并把self指针给TXBB_IOS_SDK,JS端即可经过TXBB_IOS_SDK.callPay调用起Native方法

1
2
3
4
5
6
7
8
9
10
11
12
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
     
    self.context[@"TXBB_IOS_SDK"] = self;
}
 
#pragma mark - JSExport Methods
- (void)callPay:(NSString *)charge success:(NSString *) success cancel:(NSString *)cancel {
    ...
    [Pingpp createPayment:charge appURLScheme:@"msc" withCompletion:completion];
}

Native -> Js

OC端调用JS代码则只需通过context调用evaluateScript方法即可,下列代码即会用JS显示Hello World,而在iOS7.0之前你可能通过[webView stringByEvaluatingJavaScriptFromString:@"document.title"]方法来获取WebView的title。

1
2
3
4
5
6
-(void)webViewDidFinishLoad:(UIWebView *)webView  
{   
    JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];  
    NSString *alertJs=@"alert('Hello Word')"
    [context evaluateScript:alertJs];
}

最后

JS和OC通信还有个非常著名的第三方库WebViewJavascriptBridge,如果你的项目需要支持iOS6之前的系统,你可以通过这个项目实现JS和OC的通信。

 
 

iOS7之后JavaScript与Objective-C之间的通信的更多相关文章

  1. WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信

    原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...

  2. JavaScript中进制之间的转换

    JavaScript中进制之间的转换 //十进制转其他 var x = 100; alert(x); alert(x.toString(2)); //转2进制 alert(x.toString(8)) ...

  3. C#与Javascript变量、函数之间的相互调用

    原文地址:http://blog.csdn.net/wonsoft/article/details/2595743 C#与Javascript变量.函数之间的相互调用  一.javascript调用C ...

  4. JavaScript中基本数据类型之间的转换

    在JavaScript中共有六种数据类型,其中有五种是基本数据类型,还有一种则是引用数据类型.五种基本数据类型分别是:Number 数值类型.String 字符串类型.Boolean 布尔类型, nu ...

  5. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  6. Vue 组件&组件之间的通信 父子组件的通信

    在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...

  7. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  8. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

  9. JS观察者设计模式:实现iframe之间快捷通信

    观察者设计模式又称订阅发布模式,在JS中我们习惯叫做广播模式,当多个对象监听一个通道时,只要发布者向该通道发布命令,订阅者都可以收到该命令,然后执行响应的逻辑.今天我们要实现的就是通过观察者设计模式, ...

随机推荐

  1. ElasticSearch基本操作(安装,索引的创建和删除,映射)

    ElasticSearch基于Lucene的搜索服务器,支持分布式,提供REST接口,可用于云计算,可以实现实时搜索,开源免费.这时很官方的一句话,在使用之前,我们简单的介绍一下安装过程.在官网下载之 ...

  2. Vue. 之 刷新当前页面,重载页面数据

    Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...

  3. U盘安装Linux CentOS 6.8 系统

    1.插入U盘在服务器中的USB接口: 2.选择启动的U盘进入装系统的页面: 3.选择English,按ok: 4.选UEFI:SanDisk Cruzer Edge 1.26 5.选 us 按 ok ...

  4. Gym - 102082G

    Gym - 102082Ghttps://vjudge.net/problem/2198225/origin对于数列中任意一个数,要么从最左边到它不递减,要么从最右边到到它不递减,为了满足这个条件,就 ...

  5. python \r \t \n 各种转义字符

    转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \’ 单引号 \” 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 \n 换行 \v 纵向制表符 \t 横向制 ...

  6. Ubuntu18.04 + win10双系统下时间问题

    Ubuntu 16.04使用systemd启动之后,时间也改成了由timedatectl来管理 解决的办法可以参考http://blog.sina.com.cn/s/blog_5379c55b0102 ...

  7. JS数组的相关方法

    数组创建 JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: ? 1 2 3 var arr1 = new Array(); //创建一个空数组 var arr2 = ne ...

  8. 20190815-$N \Theta IP$

    $NOIP$ 请选择您想测试的难度: 「困难」 「困难的地狱」 「能被神犇切掉的」 「你做不出来的」 「简单(完成前面所有后解锁)」 要难死了-- 考试过程: 首先看看三道题: 这是NOIP模拟测试? ...

  9. CesiumLab 地形数据处理

    最近接连有用户反应地形数据处理的各种问题,我也是各种测试,想想还是整理一个文档彻底说明一下. 地形栅格数据格式,一般是tif ,也有dem或者img,但是我个人强烈建议使用tif格式,因为cesium ...

  10. maven和java版本的对应关系

      发布日期 版 必需的Java版本 链接 2018年6月21日 3.5.4 Java 7 宣布,发布说明,参考文档 2018年3月8日 3.5.3 宣布,发布说明,参考文档 2017年10月24日 ...