JS和OC互调

本文使用了第三方框架:WebViewJavascriptBridge.h

一、obj-c调用javascript的机制

  • UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS中与UIWebView中的网页元素交互。
    使用stringByEvaluatingJavaScriptFromString方法,需要等UIWebView中的页面加载完成之后去调用。
    使用例子介绍:
    //获取当前页面的url
    [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"]
    //获取页面title:
    [webview stringByEvaluatingJavaScriptFromString:@"document.title"]
    //表单提交:
    [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"]

从以上可以看出stringByEvaluatingJavaScriptFromString不仅可以执行js来获取信息,还可以通过调用js对webView执行操作。 所以可以通过此函数来实现obj-c到js的交互。

备注:** stringByEvaluatingJavaScriptFromString这个方法有个地方需要注意, 算不上bug, 但确实有问题, 需要注意!**
如果stringByEvaluatingJavaScriptFromString执行的是带参数的js函数, 这个参数里面如果带有(\r \n ')等等, js那边收不到这个值, 这些带\的需要转义,



二、 javascript调用obj-c

UIWebView对URL的跳转进行拦截,可以通过自定义协议来捕获请求,在通过obj-c的stringByEvaluatingJavaScriptFromString来获取js对于obj-c函数的调用。

UIWebView对于跳转的拦截方法:
- (BOOL)webView:(UIWebView)webView shouldStartLoadWithRequest:(NSURLRequest)request navigationType:(UIWebViewNavigationType)navigationType {

}

实质上oc与js的通信交互就是发送消息,也即函数调用,只要在交互的过程正确的指定好对方需要调用的函数和参数就ok

  • oc-->js stringByEvaluatingJavaScriptFromString,其参数是一NSString 字符串内容是js代码(这又可以是一个js函数、一句js代码或他们的组合),当js函数有返回值或一句js代码有值返回可通过stringByEvaluatingJavaScriptFromString的返回值获取

  • js-->oc 利用webView的重定向原理(即重新在js中指定document.location的值,此为一url),只要在这个url字符串中按自定义的规则指定好所需调用oc中的函数和参数,然后通过OC中的shouldStartLoadWithRequest函数去捕获处理请求,处理完最后,如果js还想获取一些返回参数的话,同样让oc去通过stringByEvaluatingJavaScriptFromString调用刚js传过来的回调js函数就行,顺道把参数也一起传了。



三、WebViewJavaScriptBridge实现机制

webViewJavaScriptBridge 包含三个文件:

WebViewJavascriptBridge.h

WebViewJavascriptBridge.m

WebViewJavascriptBridge.js.txt

很明显:WebViewJavascriptBridge.js.txt主要用于衔接UIWebView中的web page,而WebViewJavascriptBridge.h/m则主要用于与ObjC的native code打交道。他们作为一个整体,其实起到了一个“桥梁”的作用,这三个文件封装了他们具体的交互处理方式,只开放出一些对外的涉及到业务处理的API,因此你在需要UIWebView与Native code交互的时候,引入该库,则无需考虑太多的交互上的问题。整个的Bridge对你来说都是透明的,你感觉编程的时候,就像是web编程的前端和后端一样清晰。他们使用交互如图所示:

JS和OC互调_第1张图片
WebViewJavaScriptBridge交互图.png

下面我们对WebViewJavaScriptBridge的实现做出分析。

3.1 WebViewJavaScriptBridge中的初始化
WebViewJavaScriptBridge的初始化过程如下:

1. 初始化需要使用的数据结果

2. 保存registerHandler的函数名与block

3. webView 加载完成载人js代码
JS和OC互调_第2张图片
bridge初始化流程图.png

3.2 obj-c与js的交互
obj-c与js交互使用的机制是一样的,所以单项调用的处理是混在一起,所以现在按照流程单独梳理,最后在以源码为例来说明。
3.2.1 obj-c调用js过程:

- 1、obj-c保存回调的block,使用唯一码objc_cb_* 标识
- 2、obj-c拼装data(数据),handlerName(调用名),回调标识等信息
- 3、 对信息进行json拼装,及js一些字符的转码
- 4、 执行js端的分发消息的函数
- 5、js执行完成,执行函数块,调用register的responseCallback,发送responseId和responseData
- 6、 js拼装信息到消息队列中,URL重定向;obj-c端拦截请求,执行js代码拉取数据
- 7、obj-c端根据responseId来取得保存的block,执行block

大致流程图如下:

JS和OC互调_第3张图片
obj-c调用js流程图.png

3.1.2 js调用obj-c的过程:

   - 1、js端保存data与handlerName的映射
   - 2、js端生成唯一码callbackId保存responseCallback映射,并封装callbackId到发送消息中
   - 3、js端封装后的消息放入发送消息队列中, 并执行URL重定向
   - 4、obj-c端拦截请求,判定是自定义协议后,执行js的_fetchQueue()拉取发送的信息
   - 5、obj-c端重新封装responcallback 的block,执行时调用_queueMessage进行消息分发
   - 6、从obj-c端的注册队列中获取handler的block,并执行
   - 7、执行后回调block,封装了responseId和responseData数据,并进行分发
   - 8、数据的特殊字符处理,调用js的函数_handleMessageFromObjC()来传递消息
   - 9、js获取分发的responseId,获取保存在队列中的function

大致的流程图如下:


JS和OC互调_第4张图片
js调用obj-c流程图.png

3.2 源码解读
3.2.1 obj-c端源码
因js调用涉及到自定义协议的重定向,因此定义了协议及host

#define kCustomProtocolScheme @"wvjbscheme"
#define kQueueHasMessage@"__WVJB_QUEUE_MESSAGE__"

WebViewJavaScriptBridge的初始化因为涉及到OSX端WebView与iOS端UIWebView,故根据不同的系统来做变量的统一定义,如下:

JS和OC互调_第5张图片
OS X与iOS变量重定义.png

定义block,WVJBResponseCallback定义了回调block,js返回数据后回调。WVJBHandler定义了register的block,用作不同情况下的处理。**

typedef void(^WVJBResponseCallback)(id responseData);
typedef void(^WVJBHandler)(id data,WVJBResponseCallback responseCallback);

obj-c外部接口,用于native调用使用。其中register与callhandler函数封装数据后调用send处理。


obj-c与js交互函数.png

send函数发送消息到js端的源码:

JS和OC互调_第6张图片
send封装到调用js代码.png

参数data为传递给js函数的参数,可为NSString、NSDictionary等,responseCallback则为obj-C的回调,此回调函数执行流程简述为“js注册函数执行完毕后,会返回带有responseId的消息,最后在obj-c会取出(回调存储在responCallbacks字典中),并执行”,handlerName则为js定义的函数名称。
源码中在_queueMessage方法进行逻辑判断:若在H5頁面或者js资源并未加载完毕时,在obj-C的webview中就调用了js函数,则会把相关的操作(存储为Message格式)存储在startupMessageQueue,等待相关资源加载完毕(即在webview的webViewDidFinishLoad生命周期函数中执行存储在startupMessageQueue的命令数组,执行完毕并清除改队列)再調用js的函数;否則若startupMessageQueue队列为空,则直接执行暴露在js端的webViewJavascriptBridge.handleMessageFromObjC函数,获取被调用的函数名和传人参数,以及在objC的sendData:responseCallback:handlerName中设置的回调函数id—callbackId,最终执行js注册函数,并最终想obj-c端发送“doSend({ responseId:callbackResponseId, responseData:responseData })”格式的消息,待objC接收到消息,解析responseId,执行回调函数。

webView载入H5的delegate函数:


JS和OC互调_第7张图片
finishLoad函数.png

H5 页面载入完成后,载入js资源,在对开始消息队列中的数据进行处理,并置nil。 在把delegate抛出。

JS和OC互调_第8张图片
url拦截.png

有重定向请求时,首先判断scheme及host是自定的,使用_flushMessageQueue函数处理。

JS和OC互调_第9张图片
obj-c端对js端处理.png

这段代码通过回传消息的responseId来判断是回调还是call,来进行不同的解封调用。

3.2.2 js端源码

js端定义的WebViewJavascriptBridge对象:

JS和OC互调_第10张图片
js端WebViewJavascriptBridge类.png

js端的交互函数,逻辑处理,一个registerHandler和一个callHandler主要封装。_dosend函数进行消息封装放入发送消息队列,在产生一个src(url scheme),供obj-c端shouldStartLoadWithRequest捕捉

JS和OC互调_第11张图片
消息交互函数.png

obj-c端通过_fetchQueue()获取发送的消息

js拉取发送的消息.png

js中处理来自objc的消息,判断同obj-c获取到js端的消息

JS和OC互调_第12张图片
_dispatchMessageFromObjC.png

简单代码

  • 导入WebViewJavascriptBridge (pods或直接下载个人喜好)
  • #import

oc

//
//  ViewController.m
//  WebViewJSBridgeDemo
//
//  Created by taoyali on 16/8/1.
//  Copyright © 2016年 . All rights reserved.
//

#import "ViewController.h"
#import 

@interface ViewController ()
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 2.加载网页
    NSString *indexPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSString *appHtml = [NSString stringWithContentsOfFile:indexPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseUrl = [NSURL fileURLWithPath:indexPath];
    [self.webView loadHTMLString:appHtml baseURL:baseUrl];
    
    // 3.开启日志
    [WebViewJavascriptBridge enableLogging];
    
    // 4.给webView建立JS和OC的沟通桥梁
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
    [self.bridge setWebViewDelegate:self];
    
    
    /* JS调用OC的API:访问相册 */
    [self.bridge registerHandler:@"openCamera" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"需要%@图片", data[@"count"]);
        
        UIImagePickerController *imageVC = [[UIImagePickerController alloc] init];
        imageVC.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
        [self presentViewController:imageVC animated:YES completion:nil];
    }];
    
    
     /* JS调用OC的API:访问底部弹窗 */
    [self.bridge registerHandler:@"showSheet" handler:^(id data, WVJBResponseCallback responseCallback) {
        UIAlertController *vc = [UIAlertController alertControllerWithTitle:@"你猜我谈不谈?" message:@"不谈不谈,就不谈!!" preferredStyle:UIAlertControllerStyleActionSheet];
        UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
        UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"好的" style:UIAlertActionStyleDefault handler:nil];
        [vc addAction:cancelAction];
        [vc addAction:okAction];
        [self presentViewController:vc animated:YES completion:nil];
    }];
    
    
}

/*  获取用户信息  */
- (IBAction)getUserinfo {
    // 调用JS中的API
    [self.bridge callHandler:@"getUserInfo" data:@{@"userId":@"DX001"} responseCallback:^(id responseData) {
        NSString *userInfo = [NSString stringWithFormat:@"%@,姓名:%@,年龄:%@", responseData[@"userID"], responseData[@"userName"], responseData[@"age"]];
        UIAlertController *vc = [UIAlertController alertControllerWithTitle:@"从网页端获取的用户信息" message:userInfo preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
        UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"好的" style:UIAlertActionStyleDefault handler:nil];
        [vc addAction:cancelAction];
        [vc addAction:okAction];
        [self presentViewController:vc animated:YES completion:nil];
    }];
}

/* 弹框显示消息 */
- (IBAction)showInfo {
    // 调用JS中的API
    [self.bridge callHandler:@"alertMessage" data:@"调用了js中的Alert弹窗!" responseCallback:^(id responseData) {
       
    }];
}

/* 控制界面动态跳转 */
- (IBAction)pushToNewWebSite {
    // 调用JS中的API
    [self.bridge callHandler:@"pushToNewWebSite" data:@{@"url":@"http://m.jd.com"} responseCallback:^(id responseData) {
        
    }];
}

/* 刷新界面 */
- (IBAction)reloadWebPage {
    [self.webView reload];
}

/* 插入新图片 */
- (IBAction)insertImgToWebPage {
    
    NSDictionary *dict = @{
                           @"url" : @"http://upload-images.jianshu.io/upload_images/1268909-0e394c67e1ce6666.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
                           };
    // 调用JS中的API
    [self.bridge callHandler:@"insertImgToWebPage" data:dict responseCallback:^(id responseData) {
        
    }];
    
}

@end

html:



    
        
        
        
    
    
    
        

JS调用OC中的方法

你可能感兴趣的:(JS和OC互调)