iOS中实现js与oc的交互，目前网上也有不少流行的开源解决方案；

如：react native

当然一些轻量级的任务使用系统提供的UIWebView 以及JavaScriptCore.framework 里面提供的api就能快速满足的。

方式一：iOS6上使用UIWebView 拦截url方式

以下是演示的js和oc端的代码

<html>

<head><title>JAAndOC1</title></head>

<script>

        function sdkhi()

        {

            alert("hello world!");

        }

        function sdkhito(name)

        {

            alert("hello to "+name);

        }

</script>

<body>

    <h1>hello world</h1>

    <h1>hello world</h1>

    <h1>hello world</h1>

    <h1>hello world</h1>

    <h1><a href="TCSDK://START?name=cc&age=18&phone=10086">START</a></h1>

    <h1><a href="javascript:sdkhi()">SDKHI</a></h1>

</body>

</html>
@interface ViewController ()<UIWebViewDelegate>

{

    UIWebView *theWeb;

}

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    theWeb = [[UIWebView alloc]initWithFrame:self.view.bounds];

    theWeb.scalesPageToFit = YES;

    theWeb.delegate = self;

    [self.view addSubview:theWeb];

    //本示例方法适用于iOS 6 +

    NSURL *reqUrl = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"js1.html" ofType:nil]];

    [theWeb loadRequest:[NSURLRequest requestWithURL:reqUrl]];

    UIButton *clickBtn = [UIButton buttonWithType:UIButtonTypeCustom];

    clickBtn.frame = CGRectMake(, , , );

    [clickBtn setTitle:@"clisk" forState:];

    [clickBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    [self.view addSubview:clickBtn];

    [clickBtn addTarget:self action:@selector(clickToCloseAlert) forControlEvents:UIControlEventTouchUpInside];

}

//OC调JS 并传参数

- (void)clickToCloseAlert

{

    //在弹出的alert中可能会有来自 xxx.html 字样 （百度去掉）

    [theWeb stringByEvaluatingJavaScriptFromString:@"sdkhito('cc')"];

}

//JS 调 OC 并传参数

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

{

    //访问如下自定义协议连接

    //request.URL   tcsdk://START?name=cc&age=18&phone=10086

    //request.URL.scheme   tcsdk 取出协议

    //request.URL.host     START 取出host

    //request.URL.query name=cc&age=18&phone=10086  取出参数

    NSLog(@"%@",request.URL);

    NSLog(@"%@",request.URL.scheme);

    return YES;

}

1. OC 调用js代码主要通过如下接口

[theWeb stringByEvaluatingJavaScriptFromString:@"sdkhito('cc')"];

流程：iOS的UIWebView 加载 包含js的网页；在js中定义好函数接口；

然后在oc上就可以通过上面接口直接调用的；

2. JS 调用OC 主要通过UIWebView的代理方法shouldStartLoadWithRequest 拦截URL

//JS 调 OC 并传参数

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

{

//访问如下自定义协议连接

//request.URL   tcsdk://START?name=cc&age=18&phone=10086

//request.URL.scheme   tcsdk 取出协议

//request.URL.host     START 取出host

//request.URL.query name=cc&age=18&phone=10086  取出参数

NSLog(@"%@",request.URL);

NSLog(@"%@",request.URL.scheme);

return YES;

}

流程：iOS UIWebView 加载包含js的网页；在网页中用<a> 标签名其他跳转方式改变url的操作；

然后在代理中通过拆分url的结构，分别取出协议，host，参数等；来达到js调用oc方法的的目的。

　　问题：通过url传参有限制

方式二：iOS7之后使用 JavaScriptCore.framework

该框架提供完整的js运行环境，在处理oc与js的交互中非常的方法；

如下测试代码

<html>

    <head><title>JAAndOC2</title></head>

    <script>

        //以下方法由oc 调用 js

        function sdkhi3TO(name)

        {

            alert("hello world2!"+name);

        }

        function sdkhi2()

        {

            alert("hello world2!");

        }

        function sdkhito(name)

        {

            alert("hello to "+name);

        }

        </script>

    <body>

        <h1>hello world</h1>

        <h1>hello world</h1>

        <h1>hello world</h1>

        <h1>hello world</h1>

        <h1><a href="TCSDK://START?name=cc&age=18&phone=10086">START</a></h1>

        <h1><a href="javascript:sdkhi2()">SDKHI</a></h1>

        <!-- 以下由js 调用oc 的方法 -->

        <h1><a href="javascript:ocsayhi('abc')">OCHI</a></h1>

        <h1><a href="javascript:alert(pl.fullyName())">OCHI</a></h1>

    </body>

</html>
#import "ViewController.h"

#import <JavaScriptCore/JavaScriptCore.h>

#import "Person.h"

@interface ViewController ()<UIWebViewDelegate>

{

    UIWebView *theWeb;

    JSContext *jsCXT;

}

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    //以下使用javascriptcore.framewordk

    //适用于iOS7.0

    theWeb = [[UIWebView alloc]initWithFrame:self.view.bounds];

    theWeb.scalesPageToFit = YES;

    theWeb.delegate = self;

    [self.view addSubview:theWeb];

    NSURL *reqUrl = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"js2.html" ofType:nil]];

    [theWeb loadRequest:[NSURLRequest requestWithURL:reqUrl]];

}

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

    //使用webview的js执行环境

    jsCXT = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    //异常处理

    jsCXT.exceptionHandler =

    ^(JSContext *context, JSValue *exceptionValue)

    {

        context.exception = exceptionValue;

        NSLog(@"%@", exceptionValue);

    };

    //OC 调用JS

    //[jsCXT[@"sdkhi2"] callWithArguments:nil];

    //sdkhito

    //[jsCXT[@"sdkhito"] callWithArguments:@[@"aa"]];

    //注册一个方法由js调用

    jsCXT[@"ocsayhi"] = ^(NSString *name) {

        NSLog(@"say hi to %@",name);

    };

    Person *pp = [[Person alloc]init];

    pp.firstName = @"cc";

    pp.lastName = @"j";

    pp.site = @"baidu.com";

    jsCXT[@"pl"] = pp;

    [jsCXT evaluateScript:@"alert(pl.fullyName())"];

}
#import <Foundation/Foundation.h>

#import <JavaScriptCore/JavaScriptCore.h>

@protocol PersonPtl <JSExport>

@property (nonatomic,copy)NSString *site;

/**

 对于多参数的方法，JavaScriptCore的转换方式将Objective-C的方法每个部分都合并在一起，冒号后的字母变为大写并移除冒号。比如下边协议中的方法，在JavaScript调用就是：doFooWithBar(foo, bar);

 **/

- (NSString *)fullyName;

@end

@interface Person : NSObject<PersonPtl>

@property (nonatomic, copy) NSString *firstName;

@property (nonatomic, copy) NSString *lastName;

@end
#import "Person.h"

@implementation Person

@synthesize site;

- (NSString *)fullyName

{

    return [NSString stringWithFormat:@"%@ %@", self.firstName, self.lastName];

}

@end

1. OC调用js

流程我们创建UIWebView 在 代理中获取当前页面的js环境；就是JSContext

jsCXT = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

　　然后在网页js中定义的方法，在这里我们就可以直接调用了；

//OC 调用JS

[jsCXT[@"sdkhi2"] callWithArguments:nil];

[jsCXT[@"sdkhito"] callWithArguments:@[@"aa"]];

2. JS 调用 OC

这里有两个方式，我们可以通过block的方法在oc里为js 注入一下方法，让js调用

//注册一个方法由js调用

jsCXT[@"ocsayhi"] = ^(NSString *name) {

NSLog(@"say hi to %@",name);

};

另外一个方法，稍麻烦一点，我们需要先声明协议，然后实现协议方法；通过JSExport 来暴露给JS环境调用

如上面的代码中的Person类；

调用方式：

Person *pp = [[Person alloc]init];

pp.firstName = @"cc";

pp.lastName = @"j";

pp.site = @"baidu.com";

jsCXT[@"pl"] = pp;

//以下是在当前jscxt中执行代码，当然网页js中也可以直接写

[jsCXT evaluateScript:@"alert(pl.fullyName())"];

最后完整示例工程：

https://github.com/cocoajin/TDDDemo/tree/master/JSAndOC

参考：http://www.skyfox.org/ios-wkwebview-cookie-opration.html

iOS中JS 与OC的交互(JavaScriptCore.framework)的更多相关文章

  1. iOS中js与objective-c的交互(转)

    因为在iOS中没有WebKit.Framework这个库的,所以也就没有 windowScriptObject对象方法了.要是有这个的方法的话 就方便多了,(ps:MacOS中有貌似) 现在我们利用其 ...

  2. iOS开发:JavaScriptCore.framework的简单使用--JS与OC的交互篇

    iOS7之后苹果为众猿推出了JavaScriptCore.framework这个框架,这个框架为大家在与JS交互上提供了很大帮助,可以在html界面上调用OC方法并传参,也可以在OC上调用JS方法并传 ...

  3. iOS下JS与OC互相调用（四）--JavaScriptCore

    前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了.它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下, ...

  4. iOS下JS与OC互相调用（一）--UIWebView 拦截URL

    最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1 ...

  5. iOS下JS与OC互相调用（六）--WKWebView + WebViewJavascriptBridge

    上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascr ...

  6. iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...

  7. iOS下JS与OC互相调用（八）--Cordova详解+实战

    扯两句,可以跳过 由于项目中Cordova相关功能一直是同事在负责,所以也没有仔细的去探究Cordova到底是怎么使用的,又是如何实现JS 与 OC 的交互.所以我基本上是从零开始研究和学习Cordo ...

  8. UIWebView中JS与OC交互 WebViewJavascriptBridge的使用

    一.综述 现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式.就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上.在iOS中,app多是通过W ...

  9. iOS UIWebView 中 js调用OC 打开相册 获取图片， OC调用js 将图片加载到html上

    线上html <!DOCTYPE html> <html> <head> <title>HTML中用JS调用OC方法</title> < ...

随机推荐

  1. MySQL查询优化：查询慢原因和解决技巧

    在开发的朋友特别是和mysql有接触的朋友会碰到有时mysql查询很慢,当然我指的是大数据量百万千万级了,不是几十条了,下面我们来看看解决查询慢的办法. MySQL查询优化:查询慢原因和解决方法 会经 ...

  2. 求文件的m至n行

    #!/usr/bin/env python def read_file(file_name,start,stop): start_line = 0 try: with open(file_name) ...

  3. C/C++ 结构体 函数传递

    #include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; void s ...

  4. git的那点事---

    HEAD指向的版本就是当前版本,因此,Git允许我们在版本的历史之间穿梭,使用命令git reset --hard commit_id. 穿梭前,用git log可以查看提交历史,以便确定要回退到哪个 ...

  5. BZOJ 2594: [Wc2006]水管局长数据加强版（kruskal + LCT）

    Description SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一 ...

  6. bzoj2729 [HNOI2012]排队

    组合数学,推一下式子,并不难推. java代码 import java.io.*; import java.math.BigInteger; import java.util.*; public cl ...

  7. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  8. Qt报表控件NCReport教程：报表创建示例

    NCReport是 一款10多年时间的老牌报表控件,最初是在2002年时作为qt3的应用程序的一个联合项目,后来就成为了一个独立的GPL项目.现在的NCReport 是一款轻量级.快速.多平台.简单易 ...

  9. asp批量查询

    在做asp查询时候 借鉴的一些代码 留个纪念....... <!-- #include file="conn.asp"--> <html> <head ...

  10. Hudson(Jenkins)持续集成插件开发环境搭建

    Hudson持续集成插件开发环境搭建 第一步安装java jdk,至于版本的话推荐1.6以上吧.安装好jdk设置环境变量,确保你在cmd中输入java -version有提示你jdk的版本信息等,也就 ...