OC和JS交互

  1.   OC和JS交互有三种方式:UIWebView(WKWebView)、JavaScriptCore、WebViewJavascriptBridge
    
  2.   UIWebView (WKWebView):
    

a) UIWebView

                 i.           OC调用JS:实例化UIWebView,设置代理,loadRequest加载URL,实现代理方法:-(void)webViewDidFinishLoad:(UIWebView *)webView ,加载完成是调用,完之后调用该方法,执行JS        - (nullable NSString)stringByEvaluatingJavaScriptFromString:(NSString )script;

                ii.           JS调用OC:拦截UIWebView上的所有网络请求:-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType; 判断request.URL.absoluteString;是否我们自定义的那个,然后解析URL执行不同的OC操作。

b) WKWebView:是IOS8出来的,Xcode8之后,注定淘汰UIWebView,使用WKWebView。支持更多的HTML5特性,官方宣称达到60fps的滚动帧率,才分了UIWebView,更加容易使用,占用更小的内存(UIWebView内存占用超高,内存泄漏等问题)。WKUIDelegate和WKNavigationDelegate。WKNavigationDelegate主要处理一些跳转、加载处理操作,WKUIDelegate主要处理JS脚本,确认框,警告框等。WKWebView 来说是不支持直接与JavaScriptCore 交互的。通常采取 WKUserContentController 采用它的协议方法

c) 常用方法:

                 i.           加载网页:[wkWebView loadRequest:request];

                ii.           OC调用JS:- (void)evaluateJavaScript:(NSString*)javaScriptString completionHandler:(void (^ __nullable)(__nullable id,NSError * __nullable error))completionHandler;

               iii.           JS调用OC:初始化的时候,设置config参数:
  1. WKWebViewConfiguration*config = [[WKWebViewConfiguration alloc] init]; //创建配置

  2. WKUserContentController*userContent = [[WKUserContentController alloc] init];//创建UserContentController(提供javaScript向webView发送消息的方法)

  3. [userContentaddScriptMessageHandler:self name:@"NativeMethod"];//添加消息处理,注意:self指代的是需要遵守WKScriptMessageHandler协议,结束时需要移除

  4. config.userContentController= userContent;//将UserContentController设置到配置文件

  5. _wkView =[[YXWKView alloc] initWithFrame:self.view.bounds configuration:config];//实例化WKWebView的时候传入config

  6. -(void)userContentController:(WKUserContentController *)userContentControllerdidReceiveScriptMessage:(WKScriptMessage *)message //js调用后,这里捕获

  7. JavaScriptCore:iOS7引入,把 WebKit 的JavaScript 引擎用 Objective-C 封装,提供了简单,快速以及安全的方式接入。(配合UIWebView使用)

JS执行的环境,同时也通过JSVirtualMachine管理着所有对象的生命周期,每个JSValue都和JSContext相关联并且强引用context。

import "JSContext.h"

JS对象在JSVirtualMachine中的一个强引用,其实就是Hybird对象。我们对JS的操作都是通过它。并且每个JSValue都是强引用一个context。同时,OC和JS对象之间的转换也是通过它

import "JSValue.h"

JS和OC对象的内存管理辅助对象。由于JS内存管理是垃圾回收,并且JS中的对象都是强引用,而OC是引用计数。如果双方相互引用,势必会造成循环引用,而导致内存泄露。我们可以用JSManagedValue保存JSValue来避免。

import "JSManagedValue.h"

JS运行的虚拟机,有独立的堆空间和垃圾回收机制。

import "JSVirtualMachine.h"

一个协议,如果JS对象想直接调用OC对象里面的方法和属性,那么这个OC对象只要实现这个JSExport协议就可以了。

import"JSExport.h"

JS调用OC

方法1: JS调用OC在加载完成的方法里通过JSContext来获取相应操作的key值.key值是html文件里点击方法的名字,并且调用你需要的操作

JSContext*context = [self.webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

context[@"jsButton"] = ^{/操作/};

方法2: JSExport 提供一个将OC 中的类、实例方法和属性等导出为 JavaScript 函数的方法。只有一个方法:JSExportAs(PropertyName, Selector)

OC调用JS:

方法1:[[JSContext currentContext] evaluateScript:jsStr];

方法2:[context[@"payResult"]callWithArguments:@[@"支付弹窗"]];

  1. WebViewJavascriptBridge

a) 创建UIWebView,不要设置代理,创建WebViewJavascriptBridge的时候代理赋值给它了

b) 创建WebViewJavascriptBridge,

c) 注册方法:- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler该方法有两个参数:第一个参数handlerName,是对这个功能起的一个别名;第二个参数handler,是个block,也就是Native实现的功能。JS要调用的Native 实现其实就是block 的 {} 内的代码功能。为了便于维护,我们可以将JS要调用的Native方法都集中到一起,然后单个功能再封装一个方法。

d) HTML 中有一个必须要添加的JS 方法,然后需要自动调用一次该方法。该方法是:function setupWebViewJavascriptBridge(callback) {}这个方法的作用主要是在第一次加载HTML的时候起作用,目的是加载一次wvjbscheme://BRIDGE_LOADED,来触发往HTML中注入一些已经写好的JS方法。

e) 调用OC代码:利用之前注入的JS方法callHandler 就可以调用Native 功能了。WebViewJavascriptBridge代码已经注入到JS了

f) 调用JS代码:callHandler

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

推荐阅读更多精彩内容