iOS的JavascriptCore的高级使用

正在开发的APP中一个特殊的需求,需要在APP内嵌的webview中使用js调用一些原生的方法。通过对javascript的分析,发现能够很好的解决这个问题,但是也发现了一些坑,与大家分享。

1.定义接口

通过protocol实现,这一步大家都很清楚,告诉js那边我有哪些接口。关键是JSExport,这个是我们接口必须遵循的协议,只有遵循这个协议,才能将方法争取的注射到webview中。

@protocol WebViewBridgeDelegate <JSExport>

- (void)showURL:(NSString *)url;

- (NSString*)callDK:(NSString*)func function:(NSString*)param;

@end

使用中发现,这些方法好像不能使用optional,没有进行严格的验证。

2.实现接口

只需要实现WebViewBridgeDelegate中的这些方法就可以了。

#import <UIKit/UIKit.h>
#import "WebViewBridgeDelegate.h"

@interface AppJSNative : NSObject<WebViewBridgeDelegate>

@property (nonatomic, weak) UINavigationController  *navigationController;

@end
@implementation LoldkJSNative

- (void)showURL:(NSString *)url
{
    NSLog(@"showURL:%@", url);
 [JumpHandler jumpToURI:url navigationController:self.navigationController];
}

- (NSString*)callDK:(NSString*)func function:(NSString*)param
{
 NSLog(@"%@", func);
 if ([func isEqualToString:@"getToken"])
 {
  NSString *token =xxx;
  NSMutableDictionary *result = [[NSMutableDictionary alloc]init];
  if (!IsStrEmpty(token))
  {
   [result setObject:token forKey:@"token"];
   [result setObject:@(YES) forKey:@"result"];
  }
  else
  {
   [result setObject:@(NO) forKey:@"result"];
  }
  
  NSLog(@"%@", token);
  
  return [result JSONString];
 }
 
    NSMutableDictionary *result1 = [[NSMutableDictionary alloc]init];
    [result1 setObject:@(NO) forKey:@"result"];
 return [result1 JSONString];
}

@end

其中主要是实现了一些原生页面跳转的功能,以及获取原生数据的的方法。

3. 注射到webview

- (void)webViewDidStartLoad:(UIWebView *)webView
{
    self.jsContext = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    AppJSNative *jsNative = [[AppJSNative alloc]init];
    jsNative.navigationController = self.navigationController; 
    self.jsContext[@"iOS"] = jsNative;
    
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        context.exception  = exception;
        NSLog(@"jsContext错误:%@",exception);
    };
}

为什么我要在webViewDidStartLoad中进行注射而不是webViewDidEndLoad中。因为在js加载的时候就会调用原生方法,在webViewDidEndLoad中注射会导致JS找不到对应的方法。
保存navigationController是为了方便进行页面跳转。

4. JSContext生成时机的问题

       根据上一步的确能够处理大部分问题,但是在实际使用过程中发现,在windows.onload函数中调用的时候,发现原生的接口不存在。根据分析发现是因为JSContext对象只会在onload函数之后才能获取到。此处我们需要自己找到一种方法,能够在正确的时机(越早越好)获取到JSContext对象。

       基本原理是这样的:WebKit用WebFrameLoadDelegate回调与客户端进行通讯就好像UIWebView传达页面加载事件通过他自己的UIWebViewDelegate。WebFrameLoadDelegate其中一个方法是webView:didCreateJavaScriptContext:forFrame:就像所有事件源,WebKit的代码去检测他的代理是否实现了回调方法,如果实现了就调用此方法。
证实在iOS,UIWebView内,不论任何对象实现WebKit的WebFrameLoadDelegate方法,并不是真的实现webView:didCreateJavaScriptContext:forFrame:所以WebKit从不会调用此方法。如果此方法存在于代理对象中,它将会被自动调用。

       既然如此,在OC中有很多的办法给现有的类和对象动态的增添一个方法。最简单的办法就是通过扩展。我给已有的类NSObject添加一个扩展去实现webView:didCreateJavaScriptContext:forFrame:方法。

       的确,添加这个方法让WebKit开始调用它,因为任何对象(包括UIWebView中的一些sink object)都继承自NSObject,现在都实现了webView:didCreateJavaScriptContext:forFrame:这个方法。如果未来UIWebView内部的sink object实现了这个代理方法,那么这个途径就是失效因为我们自己实现的分类永远不会被调用。

       当我们的方法被WebKit调用的时候会传给我们一个WebKit中的WebView(不是UIWebView),一个JavaScriptCore的JSContext对象和WebKit的WebFrame。因为没有一个公开的WebKit框架的头文件提供给我们,所以WebView和WebFrame对我们来说非常透明。但是JSContext正是我们寻找的,通过JavaScriptCore框架对我们来说完全是适用的。(在实际中,我最终在WebFrame中调用方法,作为一个最佳状态)

       问题现在就变成怎样根据JSContext反找到对应的UIWebView。首先我尝试使用WebView对象我们控制和沿着继承的view去找到他拥有的UIWebView.但是后来证明这个对象是一些UIView的代理,并不是一个真正的UIView。并且因为他对我们来说是透明的,我也没有打算使用它。

       我的解决方案是迭代所有在app中所创建的UIWebViews(参考代码,我是怎么样做的)并且使用stringByEvaluatingJavaScriptFromString:去储存一个token"cookie"在JavaScriptContext中,然后我在JSContext中查找已经存在的这个token,如果他存在这个UIWebView就是我所要找的。

       一旦我们有了JSContext我们就可以做一些很有趣的事情。我的测试App展示了我们怎样映射ObjectiveC的blocks和对象到全局命名空间并且通过JavaScript访问和调用它们。

5. JS调用

window.iOS. showURL("app://user?id=1");
var token = window.iOS. callDKFunction("token");

特别注意的是第二个方法,我们OC中实现的方法叫callDK, 但是由于多参数的问题,在JS中对应的方法名不再是callDK,而是将后面的参数的名字加在了函数名后面组成了新的函数名callDKFunction,这个地方耗费了我很久的时间。

6. 回调

我们也是可以在js中传入函数当做参数的,在OC中可以调用

- (void)processRequestWithData:(NSDictionary *)diconary callback:(JSValue *)value{
    NSLog(@"%@",diconary);
    NSMutableArray *array = [NSMutableArray array];
 [array addObject:[NSArray arrayWithObjects:@{@"key1":@"value1"},@{@"key2":@"value2"},nil]];
    [value callWithArguments:array];
}

其中value就是js传入的一个回调函数。

总结

以上这些例子,包含了原生页面调用、直接return值、回调。已经涵盖了绝大部分我们想通过js调用原生的场景。十分的方便。

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

推荐阅读更多精彩内容

  • 跟原生开发相比,H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势,至少不用等待审...
    大冲哥阅读 1,824评论 0 7
  • 随着H5技术的兴起,在iOS开发过程中,难免会遇到原生应用需要和H5页面交互的问题。其中会涉及方法调用及参数传值等...
    Chris_js阅读 3,053评论 1 8
  • 如果所有的状态条都是设置为白色,使用方法1,如果偶尔的使用为白色,则使用2 1.1 在AppDelegate.m里...
    XieHenry阅读 356评论 0 1
  • 纵是倦了 提起笔又搁下 摊开双手 我捧着月亮回家 刚到楼下 突然一个趔趄 摔个扑爬 月亮摔碎在花下 向外流淌 满地...
    冰冰心雨阅读 145评论 3 7
  • 去年十月份来到了北京,来到了这个很多人曾经北漂的地方,我也加入了这个行列,只是那一次,我不再是为了漂,而是为了给自...
    米亚MIA阅读 206评论 0 0