IOS和JS交互那点事

很早之前有个项目牵扯到这块就很想写篇博客记录下这篇文章了,这阵子有个项目又刚好遇到,正好有空,记录记录。

跟web的同鞋打过交道的肯定都知道,只要是涉及双端交互就两种方案啦。

  • 截取链接,一般也就通过UIWebView回调代理shouldStartLoadWithRequest截取固定链接然后在原生里面做相应的业务操作,实现也比较简单,当然这个方案也是一般涉及业务简单时候可以用,比如给个固定链接跳转原生界面,如果业务复杂点web要给原生传递参数或者多个参数再或者原生要操作web里面的相关业务,那就得考虑下面的方案二了。

  • JS交互,iOS7以前我们对JS的操作只有webview里面一个函数 stringByEvaluatingJavaScriptFromString,当然也有很多人是用的这个第三方JavascriptBridge,IOS7之后,苹果可能也考虑到了这方面的需求,也很给力推出了JavaScriptCore这个框架。

通过stringByEvaluatingJavaScriptFromString 实现OC执行JS代码

stringByEvaluatingJavaScriptFromString 这个方法是UIWebView里面的方法,也是最为简单的和JS交互的方式。

-(nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

用法比较简单,一般在代理方法- (void)webViewDidFinishLoad:(UIWebView*)webView中使用。

- (void)webViewDidFinishLoad:(UIWebView*)webView
{
    // 获取当前页面的title
    NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    // 获取当前页面的url
    NSString *url = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
}

JavaScriptCore

这是IOS7后苹果推出了JavaScriptCore这个框架,让原生和web界面交互非常方便了。代码是开源的JavaScriptCore 可以下载下来看看。

我们先了解下里面常见的属性和协议

  • JSContext:给JavaScript提供运行的上下文环境,通过-evaluateScript:方法就可以执行一JS代码。
  • JSValue:JavaScript和Objective-C数据和方法的桥梁,封装了JS与ObjC中的对应的类型,以及调用JS的API等。
  • JSManagedValue:管理数据和方法的类JSVirtualMachine:处理线程相关,使用较少。
  • JSExport:这是一个协议,如果JS对象想直接调用OC对象里面的方法和属性,那么这个OC对象只要实现这个JSExport协议就可以了。

OC调JS


    self.context = [[JSContext alloc] init];

    [self.context evaluateScript:@"function reduce(a,b) {return a-b}"];

    JSValue *value = [self.context[@"reduce"] callWithArguments:@[@10, @3]];

    NSLog(@"---%@", @([value toInt32]));    //---7

JS调OC

JS调用OC有两个方法:block和JSExport protocol。

html实现代码

<input type="button" value="JS调用原生block实现" onclick="alert('alert');" />
<input type="button" value="JS调用原生JSExport protocol实现" onclick="native.alert('alert');" />

oc实现代码

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    // 打印JS异常
    self.context.exceptionHandler =
    ^(JSContext *context, JSValue *exceptionValue)
    {
        context.exception = exceptionValue;
        NSLog(@"%@", exceptionValue);
    };

    // 以 block 形式关联 JavaScript function
    self.context[@"alert"] =
    ^(NSString *alertText)
    {
        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:alertText message:nil delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
        [alert show];
    };
    
    // 以 JSExport 协议关联 native 的方法
    self.context[@"native"] = self;
}

当前类需要声明和实现JSExport协议

@protocol TestJSExport <JSExport>
-(void)alert:(NSString *)alertText;
@end

@interface JSCallOCViewController : UIViewController<TestJSExport>
@property (strong, nonatomic) JSContext *context;
@end

#pragma mark - JSExport Methods
-(void)alert:(NSString *)alertText
{
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:alertText message:nil delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
    [alert show];
}

好啦,关于JavaScriptCore的基本介绍就是这样了。
参考http://www.jianshu.com/p/a329cd4a67ee

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,569评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,499评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,271评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,087评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,474评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,670评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,911评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,636评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,397评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,418评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,074评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0 196
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2 270

推荐阅读更多精彩内容

  • 跟原生开发相比,H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势,至少不用等待审...
    大冲哥阅读 1,755评论 0 7
  • 随着H5技术的兴起,在iOS开发过程中,难免会遇到原生应用需要和H5页面交互的问题。其中会涉及方法调用及参数传值等...
    Chris_js阅读 2,938评论 1 8
  • 昨晚因走错了路差点没赶上最后一班地铁。空旷的马路除了偶尔飞驰而过的货车就是路边草丛中的虫鸣声。 昏黄的灯光下是我快...
    红莺萝阅读 537评论 4 6
  • 文/无可救药的文艺青年 BGM:Say you won't let go 我来到你的生命里,陪你度过黑夜,天亮后我...
    无可救药的文艺青年阅读 421评论 0 6
  • 大地在慢慢的恢复着生机 幸存者并不被地震所征服 看,倒塌的房子重新矗立起来 听,教室里又响起了浪浪读书声 美好的生...
    情话总是那么美阅读 421评论 0 1