iOS JS与OC交互

iOS JS与OC交互

本文内容导航

  • 1、`UIWebView` JS 与 OC 交互
    • 1.1 OC 调用 JS 函数
      • 1.1.1 OC 拼接 JS 字符串调用 JS 方法
      • 1.1.2 使用 JSContext 上下文环境调用 JS 函数
    • 1.2 JS 调用 OC 函数
      • 1.2.1 OC 拦截 JS 超链接操作请求
      • 1.2.2 向 JS 中注入 OC 类
      • 1.2.3 使用 JSContext 上下文,JS函数 回调 OC 代码块
    • 1.3 异常收集
  • 2、`WKWebView` OC 与 JS 交互
    • 2.1 `WKUIDelegate` 协议
    • 2.2 OC 调用 JS 函数
    • 2.3 JS 调用 OC
      • 2.3.1 拦截 JS 超链接请求
      • 2.3.2 OC 接收 JS 发来的消息
  • 3、第三方库实现 OC 与 JS 交互
    • 3.1 `WebViewJavascriptBridge` 库使用

1、UIWebView JS 与 OC 交互

UIWebView 在 iOS12 中已经被废弃,同时WKWebView在iOS8中已经出现。所以无特殊情况的话,我们一般应该也是用不到前者了!
UIWebView 相比于 WKWebView 的使用上会简单很多。

UIWebView 初始化:

    self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    self.webView.delegate = self;
    [self.view addSubview:self.webView];
    // 加载本地 H5 文件
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
    NSURLRequest *reqeust = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:reqeust];

UIWebViewDelegate 协议的几个方法:

// 拦截JS页面操作请求,JS 调用OC 方法时会用到
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
// 开始加载页面
- (void)webViewDidStartLoad:(UIWebView *)webView;
// 页面加载完毕
- (void)webViewDidFinishLoad:(UIWebView *)webView;
// 页面加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

1.1 OC 调用 JS 函数

OC 调用 JS 函数,有两种方法:

①使用stringByEvaluatingJavaScriptFromString,拼接 JS 字符串调用。
②使用 JSContext 上下文调用 JS 函数

第一种方法使用相对简单,但复杂业务可能无法实现。

1.1.1 OC 拼接 JS 字符串调用 JS 方法

JS 代码如下:



	
	    
	    OC与JS交互
	    
	

OC 中调用 JS 函数,是将 JS 拼接成字符串,作为 stringByEvaluatingJavaScriptFromString 方法的参数实现的。

/** OC 调用 JS 无返回值 */
- (IBAction)didClickLeftItem:(id)sender {
    [self.webView stringByEvaluatingJavaScriptFromString:@"showAlert_noReturnValue('无返回值')"];
}
/** OC 调用 JS 有返回值 */
- (IBAction)didClickRightItem:(id)sender {
    // OC --> JS 有返回值
    NSString *resString = [self.webView stringByEvaluatingJavaScriptFromString:@"showAlert_hasReturnValue('有返回值')"];
    NSLog(@"%@", resString);
}

1.1.2 使用 JSContext 上下文环境调用 JS 函数

UIWebView 加载完成时,初始化上下文环境:

#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.context = context;
}
#pragma mark - 响应
/** OC 调用 JS 无返回值 */
- (IBAction)didClickLeftItem:(id)sender {
    NSDictionary *dict = @{@"name": @"kangpp", @"age": @28};
    // 上下文调用 JS 函数
    [self.context[@"ocCallJS_byJSContext"] callWithArguments:@[dict]];
}

1.2 JS 调用 OC 函数

JS 调用 OC 函数有三种实现方式:

webView: shouldStartLoadWithRequest: 协议中拦截 JS 操作。
② 使用 JavaScriptCore,向 JS 中注册 OC 类,JS 函数中直接调用 OC 方法。
③ 使用 JSContext 上下文,JS 回调 OC 代码块。

1.2.1 OC 拦截 JS 超链接操作请求

HTML 文件中,需要调用 OC 方法的标签,添加超链接属性(超链接协议可自定义)。那么该标签的操作将在 UIWebViewDelegate 协议方法 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 中被监听拦截。
JS 文件如下:



	
	    
	    OC与JS交互
	    
	
	
	    
	

当点击 标签时,在 下方协议方法中我们将从request中获取URL信息:

#pragma mark - UIWebViewDelegate
// 加载所有请求数据,以及控制是否加载
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    // URL ==> kpp://jsCallOC:/helloword/js
    NSURL *requestURL = request.URL;
    // URL 的一般格式为 scheme://host:port/path?
    NSString *scheme = requestURL.scheme;
    NSString *host = requestURL.host;
    NSNumber *port = requestURL.port;
    NSArray *paths = requestURL.pathComponents;
    // URL 全路径字符串
    NSString *absoluteString = requestURL.absoluteString;
    // 端口后的相对路径
    NSString *path = requestURL.path;
    return YES;
}

根据以上从 URL 中获取的数据,可以在此设置路由调用 OC 中指定的方法。前提当然是自己协商一致 URL 数据格式。

#pragma mark - UIWebViewDelegate
// 加载所有请求数据,以及控制是否加载
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    // request : host + 路由  : 拦截
    if ([request.URL.scheme isEqualToString:@"kpp"]) {
        // 方法名 kpp://jsCallOC:/helloword/js
        NSString *routerName = request.URL.host;
        SEL methodSEL = NSSelectorFromString(routerName);
        // 测试方法为 jsCallOC
        NSLog(@"routerName => %@", routerName);
        if ([self respondsToSelector:methodSEL]) {
            objc_msgSend(self,methodSEL,@"");
        } else {
            NSLog(@"没有找到对应的路由方法");
        }
        return NO;
    }
    return YES;
}
/** JS 调用 OC 的响应方法 */
- (void)jsCallOC {
    NSLog(@"被JS调用的方法!");
    UIAlertController *controller = [UIAlertController alertControllerWithTitle:@"提示" message:@"JS调用OC方法" preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
    [controller addAction:okAction];
    [self presentViewController:controller animated:YES completion:nil];
}

1.2.2 向 JS 中注入 OC 类

向 JS 注入 OC 类,需要引入 框架,使用 JSContext 向 JS 中注入 OC 类。
同时,被 JS 调用的 OC 方法,需要遵守 JSExport 协议。
例如,需求为 JS 调用 OC 的 getUserInfo 方法,获取应用内用户信息。
首先,要将该方法使用协议约定,并继承JSExport 协议:

@protocol TestProtocol 
- (NSString *)getUserInfo;
@end

然后在注入JS的类中遵守TestProtocol协议并实现 getUserInfo 方法 ,demo中直接在控制器实现:

@interface ViewController ()
@property (nonatomic, strong) UIWebView *webView;
@end

当 UIWebView 加载完成的时候,使用JSContext 向 WebView 中注入OC类:

#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    // 可以注入实例对象也可以注入类对象
    context[@"ViewController"] = self;
}

相应的在JS 中,可以直接使用 OC 类和方法调用:



    
        
        OC与JS交互
        
    
    
        
    

1.2.3 使用 JSContext 上下文,JS函数 回调 OC 代码块

JS 代码中blockOCCode()就是执行的OC代码块,如下:



    
        
        OC与JS交互
        
    
    
        
    

同理,在OC代码中,当页面加载完毕,就要拿到上下文的引用,注入属性及blockOCCode 代码块赋值:

#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
	// 拿到 JS 上下文引用
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.context = context;
    self.context[@"ViewController"] = self;
    // js 中注入全局变量
    [context evaluateScript:@"var arr = ['张三', '李四', '王五', '赵六']"];
    context[@"blockOCCode"] = ^(NSArray *jsArr){
        // jsArr 是 JS 传递给 OC代码块的参数
        NSLog(@"blockOCCode->jsArr == %@", jsArr);
        // 通过上下文拿到 JS 全局属性
        //NSArray *orgArr = [JSContext currentArguments];
        //NSLog(@"blockOCCode->orgArr == %@", orgArr);
    };
}

如此即可实现 JS 回调 OC 代码块。

1.3 异常收集

JS 异常收集代码:

#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 异常收集
    self.context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        NSLog(@"%@",exception);
    };
}

2、WKWebView OC 与 JS 交互

WKWebView 初始化:

    // 配置类
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    // 适配移动设备
    NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
    WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    WKUserContentController *wkUController = [[WKUserContentController alloc] init];
    [wkUController addUserScript:wkUScript];
    configuration.userContentController = wkUController;
    // 初始化 WebView
    self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    // 
    self.webView.UIDelegate = self;
    self.webView.navigationDelegate = self;
    [self.view addSubview:self.webView];
    // 加载(本地) H5 文件
    NSString *urlStr = [[NSBundle mainBundle] pathForResource:@"WKWebView_Index.html" ofType:nil];
    NSURL *fileURL = [NSURL fileURLWithPath:urlStr];
    [self.webView loadFileURL:fileURL allowingReadAccessToURL:fileURL];

2.1 WKUIDelegate 协议

常用该协议替换 JS 弹窗提示,以获得更好的用户体验。

// 创建一个新的 WebView 视图时调用
- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
// 视图关闭时调用
- (void)webViewDidClose:(WKWebView *)webView;
// JS 警告框调用
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
// JS 确认框调用
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
// JS prompt()函数,该方法会被执行
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

2.2 OC 调用 JS 函数

OC 调用 JS 是通过 evaluateJavaScript: completionHandler: 方法实现的,JS 代码比较简单:



    
        
            OC与JS交互
            
    

OC 代码也不难:

/** OC 调用 JS 返回值在 completionHandler 的回调参数 result 里 */
- (IBAction)didClickRightItem:(id)sender {
    // OC --> JS 有返回值
    NSString *jsStr = @"ocCallJS('WK_ocCallJS:OC-->JS')";
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        // result 是 JS return 回来的值
        NSLog(@"%@----%@",result, error);
    }];
}

2.3 JS 调用 OC

WKWebView 中 JS 调用 OC 函数有两种实现方式:

① 使用 WKNavigationDelegate 协议 webView: decidePolicyForNavigationAction: decisionHandler: 方法拦截 JS 操作请求。
② 使用 WKScriptMessageHandler 协议 userContentController: didReceiveScriptMessage: 方法,接收 JS 发来的特定消息进行解析处理。

2.3.1 拦截 JS 超链接请求

HTML 文件中,需要调用 OC 方法的标签,添加超链接属性(超链接协议可自定义)。那么该标签的操作将在 WKNavigationDelegate 协议方法 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 中被监听拦截。
JS 代码:



    
        
            OC与JS交互
    
    
        

OC 中拦截,并使用路由调用指定 OC 方法:

#pragma mark - WKNavigationDelegate
// 拦截 JS 代码中的 请求操作
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if ([navigationAction.request.URL.scheme isEqualToString:@"kpp"]) {
        NSString *routerName = navigationAction.request.URL.host;
        SEL methodSEL = NSSelectorFromString(routerName);
        NSLog(@"routerName => %@", routerName);
        if ([self respondsToSelector:methodSEL]) {
            objc_msgSend(self,methodSEL,@"");
            
        } else {
            NSLog(@"没有相应路由");
        }
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}
// 被 JS 调用的 OC 方法
- (void)WKWebView_jsCallOC {
    UIAlertController *controller = [UIAlertController alertControllerWithTitle:@"提示" message:@"WK 中JS调用OC方法" preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
    [controller addAction:okAction];
    [self presentViewController:controller animated:YES completion:nil];
}

2.3.2 OC 接收 JS 发来的消息

该方法使用步骤上相对繁琐,但 WKScriptMessageHandler 协议中只有一个方法userContentController: didReceiveScriptMessage:
① 引入 WKScriptMessageHandler 协议,并使用 config 初始化 WKWebView。
② 注册 ScriptMessageHandler
③ 实现协议方法。
④ 移除 ScriptMessageHandler

JS 代码:



    
        
            OC与JS交互
            
    
    
        

OC 代码实现步骤:

// ① 引入协议
@interface KYWKContorller ()
// ② 注册消息处理名称为:messgaeToOC
- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"messgaeToOC"];
}
// ③ 实现协议方法
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
	// message.name 就是我们注册的 messgaeToOC
	// message.body 就是JS发送过来的消息
    NSLog(@"%@---%@",message.name, message.body);
    // 根据这两个参数 写我们的业务代码
    ... ...
}
// ④ 控制器销毁时移除 `ScriptMessageHandler`
- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"messgaeToOC"];
}

3、第三方库实现 OC 与 JS 交互

3.1 WebViewJavascriptBridge 库使用

该节介绍的第三方库是:WebViewJavascriptBridge。
该库支持 UIWebViewWKWebView。使用比较简单,上手容易。
使用步骤:

① 引入头文件
② 初始化桥接类实例
③ (JS 调用 OC)OC中 registerHandler 注册JS方法,使用block传参及回调;( OC 调用 JS)callHandler 调用 JS 方法,使用block回调JS返回结果。




    
    OC与JS交互
    


    

OC 代码实现:

#import "WebViewJavascriptBridge.h"
@property (strong, nonatomic) WKWebView   *webView;
@property (nonatomic, strong) WebViewJavascriptBridge *wjb;
- (void)createWjb {
	// 初始化桥接类实例
    self.wjb = [WebViewJavascriptBridge  bridgeForWebView:self.webView];
    // 设置 WKNavigationDelegate 代理,保留该协议使用者依然可用
    [self.wjb setWebViewDelegate:self];
}
/** JS 调用 OC 方法 */
- (void)jsCallOC {
    // JS-->OC
    [self.wjb  registerHandler:@"jsCallsOC" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 是 JS 传递给OC 的参数,responseCallback可将执行结果回调给 JS
        NSLog(@"%@---%@----%@",[NSThread currentThread],data,responseCallback);
        responseCallback(@"JS调用的OC方法已执行");
    }];
}
/** OC 调用 JS 方法 */
- (void)OCCallJS {
    [self.wjb callHandler:@"OCCallJSFunction" data:@"传递参数param" responseCallback:^(id responseData) {
        // data 是 OC 传递给 JS 的参数,responseData是 JS 执行完成后回调给OC 的执行结果
        NSLog(@"%@--%@",[NSThread currentThread],responseData);
    }];
}

你可能感兴趣的:(iOS)