Objective-C与JavaScript交互的那些事(续)

注:此文只现在只推荐需要适配iOS7的同学读,如果已经扔掉iOS7,强烈建议换用WKWebView。已出WKWebView文章WKWebView使用及注意点(keng)

交互的细节可以参考我写的上一篇文章JavaScript和Objective-C交互的那些事。已经写过交互了,为什么相隔几个月来还要在出一片续集呢?这是因为过去几个月的使用的过程中出现了几个深坑,在这里特别强调一下。深坑主要包括内存管理和什么时候注入交互对象才是合理的。

内存管理

内存泄露问题

在我的第一篇文章里面注入的交互对象为控制器self,这样JSContext环境引用控制器self,在退出控制器的时候,因为控制器selfJSContext引用而不释放,而JSContext只有等控制器释放了才能随之释放,所以就引起了循环引用,造成内存泄露。

解决办法

关于这个问题说三种解决办法。

  • 可以使用我参考文章中提到的,注入一个中间的对象去交互,而不是直接使用控制器selfiOS与JS交互实战篇(ObjC版),这样可能需要在对象中在加一层代理,或者Block来进行和控制器之间的通信。
  • 注入对象改为注入类[self class],这样倒是可以防止内存泄露,但是所写的代理方法就要改为类方法,全部使用类方法在实际开发中会带来一些不便,也不会太好。
  • 使用Block进行交互替掉JSExport协议

合适时机注入交互对象

UIWebView什么时机创建JSContext环境

什么时候UIWebView会创建JSContext环境,分两种方式,第一在渲染网页时遇到<script标签时,就会创建JSContext环境去运行JavaScript代码。第二就是使用方法[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]去获取JSContext环境时,这时无论是否遇到<script标签,都会去创造出来一个JSContext环境,而且和遇到<script标签再创造环境是同一个。

我的错误做法

刚开始的时候,我是在- (void)webViewDidFinishLoad:(UIWebView *)webView中去注入交互对象,但是这时候网页还没加载完,JavaScript那边已经调用交互方法,这样就会调不到原生应用的方法而出现问题。后来我就改成在- (void)viewDidLoad中去注入交互对象,这样倒是解决了上面的问题,但是同时又引起了一个新的问题就是在一个网页内部点击链接跳转到另一个网页的时候,第二个页面需要交互,这时JSContext环境已经变化,但是- (void)viewDidLoad仅仅加载一次,跳转的时候,没有再次注入交互对象,这样就会导致第二个页面没法进行交互。当然你可以在- (void)viewDidLoad- (void)webViewDidFinishLoad:(UIWebView *)webView都注入一次,但是一定会有更优雅的办法去解决此问题。

解决办法

那么交互对象到底该什么时候注入呢?其实网上已有很好的解决办法,就是在每次创建JSContext环境的时候,我们都去注入此交互对象这样就解决了上面的问题。具体解决办法参考了此开源库UIWebView-TS_JavaScriptContext。关于这个开源库,我说一点在- (void)webView:(id)unused didCreateJavaScriptContext:(JSContext*)ctx forFrame:(id<TSWebFrame>)frame此方法中使用到代理方法parentFrame可能会被认为是私有API而遭拒,在Issues中有人提到。此开源库的实现思路可以参考readme写的很不错,除了解决这个问题,也可以学习到一些思考问题的思路。有些不太愿意读英文的同学,我这里也有中文版仅供参考。

UIWebView-TS_JavaScriptContext的readme译文

我曾经做过很多的混合iOS应用,但是我不屑于承认。这些应用的一个主要痛点是通过web/native边界(运行在UIWebView中的JavaScript与运行在App中的ObjectiveC之间)进行交互。

我们都知道官方只给出一种方法从ObjectiveC调到网页里,是通过stringByEvaluatingJavaScriptFromString方法。还有一种调用JavaScript的典型办法是人为设置window.location去触发UIWebView的代理方法shouldStartLoadWithRequest:。另一种常常使用到的技术是实现自定义的NSURLProtocol并拦截通过XMLHttpRequest发出的请求。

在iOS7中苹果给出了一个公开的框架JavaScriptCore(WebKit的一部分),这个框架提供了简单机制在ObjectiveC和JavaScript的环境中互相调用对象和方法。众所周知,UIWebView建立在WebKit之上最终也是使用了JavaScriptCore,不幸的是苹果没有暴露一些途径给我们去访问这套框架。

可以使用KVC简单粗暴的获取这个深植于UIWebView内部官方文档却未定义的属性JSContext这篇博客介绍了这个技术。当然,这个方法的主要缺点是他依赖UIWebView的内部构造。

我介绍一个可供选择的方法去获取UIWebViewJSContext。当然我的方法也不是官方的,可能被拒。我应该不会尝试提交一个这样的应用到AppStore。但它看来至少不那么容易被拒,我认为它并没有特别地依赖于UIWebView的内部结构不同于UIWebView自己用WebKit和JavaScriptCore。(这有个小警告,一会解释)

基本原理是这样的:WebKit用WebFrameLoadDelegate回调与客户端进行通讯就好像UIWebView传达页面加载事件通过他自己的UIWebViewDelegate。WebFrameLoadDelegate其中一个方法是webView:didCreateJavaScriptContext:forFrame:就像所有事件源,WebKit的代码去检测他的代理是否实现了回调方法,如果实现了就调用此方法。下面是WebKit的部分源码(WebFrameLoaderClient.mm)

if (implementations->didCreateJavaScriptContextForFrameFunc) {
    CallFrameLoadDelegate(implementations->didCreateJavaScriptContextForFrameFunc, webView, @selector(webView:didCreateJavaScriptContext:forFrame:), script.javaScriptContext(), m_webFrame.get());
}

证实在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访问和调用它们。

总结

在使用一项技能的时候,一定要挖透,理解其原理,这样在遇到问题的时候才能更从容的应对。这也算是给我的一点点启示和教训吧,更希望大家能引以为戒。关于readme的译文,作者水平有限,欢迎指正。

更新

参考

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

推荐阅读更多精彩内容