https://github.com/changjianfeishui/XBWebBridge

ObjectiveC与Js交互是常见的需求,可对于新手或者所谓的高手而言,其实并不是那么简单明了。这里只介绍iOS7.0后出来的JavaScriptCore framework。

关于JavaScriptCore

本教程中所涉及到的几种类型:

  • JSContext, JSContext是代表JS的执行环境,通过-evaluateScript:方法就可以执行一JS代码
  • JSValue, JSValue封装了JS与ObjC中的对应的类型,以及调用JS的API等
  • JSExport, JSExport是一个协议,遵守此协议,就可以定义我们自己的协议,在协议中声明的API都会在JS中暴露出来,才能调用

ObjC与JS交互方式

通过JSContext,我们有两种调用JS代码的方法:

  • 1、直接调用JS代码
  • 2、在ObjC中通过JSContext注入模型,然后调用模型的方法

直接调用JS代码

 // 一个JSContext对象,就类似于Js中的window,
// 只需要创建一次即可。
self.jsContext = [[JSContext alloc] init]; // jscontext可以直接执行JS代码。
[self.jsContext evaluateScript:@"var num = 10"];
[self.jsContext evaluateScript:@"var squareFunc = function(value) { return value * 2 }"];
// 计算正方形的面积
JSValue *square = [self.jsContext evaluateScript:@"squareFunc(num)"]; // 也可以通过下标的方式获取到方法
JSValue *squareFunc = self.jsContext[@"squareFunc"];
JSValue *value = [squareFunc callWithArguments:@[@"20"]];
NSLog(@"%@", square.toNumber);
NSLog(@"%@", value.toNumber);

这种方式是没有注入模型到JS中的。这种方式使用起来不太合适,通常在JS中有很多全局的函数,为了防止名字重名,使用模型的方式是最好不过了。通过我们协商好的模型名称,在JS中直接通过模型来调用我们在ObjC中所定义的模型所公开的API。

通过注入模型的方式交互

首先,我们需要先定义一个协议,而且这个协议必须要遵守JSExport协议。

@protocol JavaScriptObjectiveCDelegate <JSExport>

// JS调用此方法来调用OC的系统相册方法
- (void)callSystemCamera;
// 在JS中调用时,函数名应该为showAlertMsg(arg1, arg2)
// 这里是只两个参数的。
- (void)showAlert:(NSString *)title msg:(NSString *)msg;
// 通过JSON传过来
- (void)callWithDict:(NSDictionary *)params;
// JS调用Oc,然后在OC中通过调用JS方法来传值给JS。
- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params; @end

接下来,我们还需要定义一个模型:

// 此模型用于注入JS的模型,这样就可以通过模型来调用方法。
@interface HYBJsObjCModel : NSObject <JavaScriptObjectiveCDelegate> @property (nonatomic, weak) JSContext *jsContext;
@property (nonatomic, weak) UIWebView *webView; @end

实现这个模型:

@implementation HYBJsObjCModel

- (void)callWithDict:(NSDictionary *)params {
NSLog(@"Js调用了OC的方法,参数为:%@", params);
} // Js调用了callSystemCamera
- (void)callSystemCamera {
NSLog(@"JS调用了OC的方法,调起系统相册"); // JS调用后OC后,又通过OC调用JS,但是这个是没有传参数的
JSValue *jsFunc = self.jsContext[@"jsFunc"];
[jsFunc callWithArguments:nil];
} - (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params {
NSLog(@"jsCallObjcAndObjcCallJsWithDict was called, params is %@", params); // 调用JS的方法
JSValue *jsParamFunc = self.jsContext[@"jsParamFunc"];
[jsParamFunc callWithArguments:@[@{@"age": @10, @"name": @"lili", @"height": @158}]];
} - (void)showAlert:(NSString *)title msg:(NSString *)msg {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *a = [[UIAlertView alloc] initWithTitle:title message:msg delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];
[a show];
});
} @end

接下来,我们在controller中在webview加载完成的代理中,给JS注入模型。

#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// 通过模型调用方法,这种方式更好些。
HYBJsObjCModel *model = [[HYBJsObjCModel alloc] init];
self.jsContext[@"OCModel"] = model;
model.jsContext = self.jsContext;
model.webView = self.webView; self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息:%@", exceptionValue);
};
}

我们是通过webView的valueForKeyPath获取的,其路径为documentView.webView.mainFrame.javaScriptContext
这样就可以获取到JS的context,然后为这个context注入我们的模型对象。

我们先写两个JS方法:

 var jsFunc = function() {
alert('Objective-C call js to show alert');
} var jsParamFunc = function(argument) {
document.getElementById('jsParamFuncSpan').innerHTML
= argument['name'];
}

这里我们定义了两个JS方法,一个是jsFunc,不带参数。
另一个是jsParamFunc,带一个参数。

接下来,我们在html中的body中添加以下代码:

<div style="margin-top: 100px">
<h1>Test how to use objective-c call js</h1>
<input type="button" value="Call ObjC system camera" onclick="OCModel.callSystemCamera()">
<input type="button" value="Call ObjC system alert" onclick="OCModel.showAlertMsg('js title', 'js message')">
</div> <div>
<input type="button" value="Call ObjC func with JSON " onclick="OCModel.callWithDict({'name': 'testname', 'age': 10, 'height': 170})">
<input type="button" value="Call ObjC func with JSON and ObjC call js func to pass args." onclick="OCModel.jsCallObjcAndObjcCallJsWithDict({'name': 'testname', 'age': 10, 'height': 170})">
</div> <div>
<span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span>
</div>

现在就可以测试代码了。

当我们点击第一个按钮:Call ObjC system camera时,
通过OCModel.callSystemCamera(),就可以在HTML中通过JS调用OC的方法。
在OC代码中,我们的callSystemCamera方法体中,添加了以下两行代码,就是获取HTML中所定义的JS就去jsFunc,然后调用它。

 JSValue *jsFunc = self.jsContext[@"jsFunc"];
[jsFunc callWithArguments:nil];

这样就可以在JS调用OC方法时,也让OC反馈给JS。

看看下面传字典参数:

- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params {
NSLog(@"jsCallObjcAndObjcCallJsWithDict was called, params is %@", params); // 调用JS的方法
JSValue *jsParamFunc = self.jsContext[@"jsParamFunc"];
[jsParamFunc callWithArguments:@[@{@"age": @10, @"name": @"lili", @"height": @158}]];
}

获取我们在HTML中定义的jsParamFunc方法,然后调用它并传了一个字典作为参数。

好了,就讲这么多吧,如果想要Demo源代码,请到
github:https://github.com/CoderJackyHuang/IOSCallJsOrJsCallIOS

一个简单的ObjC和JavaScript交互工具的更多相关文章

  1. 一个简单的html5页面在线速成工具!(当然本文主要说下他的成果的结构)

    分享一个好玩的web app页面速成工具 当然主要是让大家看下他的原理 看着他的结构大家就该猜到这个了.这个是利用换页之后给当前div加了一个active,然后利用css控制效果 这个毫无疑问是采用最 ...

  2. 一个简单的后台与数据库交互的登录与注册[sql注入处理,以及MD5加密]

    一.工具: vs2013[因为我现在用的也是2013,版本随便你自己开心] sql2008[准备过久升级] 二.用到的语言: HTML+CSS+Jquery+Ajax+sqlserver HTML[相 ...

  3. FineBI:一个简单易用的自助BI工具

    过去,有关企业数据分析的重担都压在IT部门,传统BI分析更多面向的是具有IT背景的人员.但随着业务分析需求的增加,很多公司都希望为业务用户提供自助分析服务,将分析工作落实到业务人员手中.但同时,分析工 ...

  4. LogCook 一个简单实用的Android日志管理工具

    众所周知,日志的管理是软件系统很重要的一部分,千万不可忽略其重要性.完整的日志将会在系统维护中起着异常重要的作用,就好像磨刀不误砍柴工一样,日志就像对系统进行分析的工具,工具便捷了,对系统分析起来就能 ...

  5. 方法:一个简单的读取配置文件.properties的工具类 JAVA

    import java.util.ResourceBundle; public class ConfigHelper { private static ConfigHelper instance; p ...

  6. 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  7. 一个简单的URL访问权限校验

    前言 目前最流行的两大安全框架:SpringSecruity.Shiro 权限控制,无非就是:前端控件是否可见.是否允许请求/访问URL 本文分享一个简单的URL访问权限校验,支持/./*./**等情 ...

  8. 基于node实现一个简单的脚手架工具(node控制台交互项目)

    实现控制台输入输出 实现文件读写操作 全原生实现一个简单的脚手架工具 实现vue-cli2源码 一.实现控制台输入输出 关于控制台的输入输出依然是基于node进程管理对象process,在proces ...

  9. Ajax实现局部数据交互的一个简单实例

    想要实现的功能:利用Ajax技术通过点击一个<button>按钮,然后在指定的文本框中输出想要的值. 1.使用Jsp创建一个前端页面. <body> <div style ...

随机推荐

  1. .net中运用solr提升搜索效率(入门)

    概述: 在开发网站的时候经常有要对某些内容查询的需求.此时如果基于数据库查询来做搜索功能,由于要对多个字段做模糊匹配,效率往往非常糟糕.这种情况就可以用Solr来提升搜索的效率.Solr是一个独立的企 ...

  2. 007--VS2013 C++ 显示位图半透明化

    以后所有图片都放在根目录下: 如有另放,会特别注明 //全局变量HBITMAP bg,girl;HDC mdc; //起始坐标const int xstart = 50;const int ystar ...

  3. sublime mac快捷键

    ^是control ⌥是option 打开/前往 ⌘T 前往文件 ⌘⌃P 前往项目 ⌘R 前往 method ⌘⇧P 命令提示 ⌃G 前往行 ⌘KB 开关侧栏 ⌃ ` python 控制台 ⌘⇧N 新 ...

  4. 【转】linux root用户ifconfig报command not found

    解决办法: 方法一: 直接输入su - 回车.就可以ifconfig了 方法二: /etc/profile 把下面if语句注释掉: #path Manipulation if ["EUID& ...

  5. Notes of the scrum meeting(11/2)

    meeting time:13:00~13:30p.m.,November 2nd,2013 meeting place:3号公寓楼一层 attendees: 顾育豪                  ...

  6. 如何写一个漂亮的Liferay Theme 6.2

    只要你看到的.想做出来的页面,都可以通过liferay theme来实现,至于具体实现凡方式,那就见仁见智了. 下面,我将介绍如何快速地建一个简单漂亮的liferay theme. 工具:lifera ...

  7. merry Christmas

    圣诞节的来历 圣诞节这个名称是基督弥撒的缩写. 弥撒是教会的一种礼拜仪式. 1.耶诞节是一个宗节,我们把它当作耶苏的诞辰来庆祝,因而又名耶诞节.这一天,世界所有的基督教会都举行特别的礼拜仪式.但是有很 ...

  8. 【Convert Sorted Array to Binary Search Tree】cpp

    题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...

  9. 修改placeholder文字颜色

    .area_ipt ::-webkit-input-placeholder { /* WebKit browsers */ color:#258aca; } .area_ipt :-moz-place ...

  10. 图解Git/图形化的Git参考手册

    此页图解git中的最常用命令.如果你稍微理解git的工作原理,这篇文章能够让你理解的更透彻. 基本用法 上面的四条命令在工作目录.暂存目录(也叫做索引)和仓库之间复制文件. ● git add fil ...