iOS 与 Web 互调
2019-08-03 本文已影响0人
一意孤行的程序猿
前提
苹果推出JSCore 以前，iOS 调用JS 只能通过WebView 执行JSString 来实现。而WebView 没法直接调用iOS，只能触发特定链接，让iOS在WebView代理方法中捕获到这特定链接，从而执行相应操作，间接实现WebView 调 iOS。
原理
// iOS 调 JS
[_webView stringByEvaluatingJavaScriptFromString:jsString];
// JS 调 iOS
1：
web 将href 改为特定值
2：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSURL *url = [request URL];
if (url == 特定值) {call method}
}
iOS7之后苹果推出JSCore，通过获取web上下文环境，实现了iOS可以直接调JS方法，同时iOS 也能将block 赋值给JS的方法，实现了JS调用iOS并传值。
// 获取JS上下文
JSContext *jsContext;
-(void)webViewDidFinishLoad:(UIWebView *)webView {
jsContext = [_webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}
// iOS 调 JS
JSValue *funcValue = jsContext[@"insertText"];
[funcValue callWithArguments:@[@"hello!!!!"]];
//JS 调 iOS
jsContext[@"callNative"] = ^(NSString*str){
NSLog(str);
};
三方库WebViewJavascriptBridge
当然了不用三方库，自己也是能实现，之所有在这介绍这个三方库，还是觉得这个库设计还是不错，值得学习。
结构:
image.png
iOS端用法:
iOS 端与 web端统一好handler 名。
初始化bridge
_bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
iOS call Web，iOS 端要做的
// iOS 端直接callHandler
[_bridge callHandler:@"JSToDo" data:@{}];
Web call iOS ，iOS 端要做的
// 注册handler 等待被Web调用
[_bridge registerHandler:@"OCToDo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSString *str = [NSString stringWithFormat:@"%@",data];
UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"iOS alert" message:str preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleDefault handler:nil];
[alert addAction:okAction];
[self presentViewController:alert animated:false completion:nil];
responseCallback(@"iOS receive data");
}];
用法对法iOS 端来说还是蛮简单的！当然这些仅仅靠iOS 端还不够，需要web 端配合，待分析了实现原理后再看web 端的工作。
关系、作用:
前面说过JSCore 以前 iOS调web 只能用webView 执行JSString， web 调 iOS 只能主动触发特定url 让iOS 端监听到，实现间接调用。那这个三方库的实现基础正是如此。只不过在代码层面通过“观察者模式”加以封装。
Class: WebViewJavascriptBridge
1、 在初始化时成为webView 的真实代理
// 实例化
+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
WebViewJavascriptBridge* bridge = [[self alloc] init];
[bridge _platformSpecificSetup:webView];
return bridge;
}
// 成为代理、初始化WebVeiwJavascriptBridgeBase
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
_webView = webView;
_webView.delegate = self;
_base = [[WebViewJavascriptBridgeBase alloc] init];
_base.delegate = self;
}
// 实现WebViewDelegate方法
...
2、暴露接口， 提供callHandler、registerHandler 方法
- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;
- (void)callHandler:(NSString*)handlerName;
- (void)callHandler:(NSString*)handlerName data:(id)data;
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;
3、监听Url变化
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if (webView != _webView) { return YES; }
NSURL *url = [request URL];
__strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
if ([_base isCorrectProcotocolScheme:url]) {
if ([_base isBridgeLoadedURL:url]) {// wvjbscheme://__BRIDGE_LOADED__
[_base injectJavascriptFile]; // 重点：注入JSBridge
} else if ([_base isQueueMessageURL:url]) {
NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]]; //从Web 页面获取JS 数据
[_base flushMessageQueue:messageQueueString]; // 数据处理
} else {
[_base logUnkownMessage:url];
}
return NO;
} else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
} else {
return YES;
}
}
主要就是提供接口、监听变化，具体实现都是交给WebViewJavascriptBridgeBase。
Class: WebViewJavascriptBridgeBase
给WebViewJavascript 类充当业务层，实现CallHandler、registerHandler。通过操控WebView 执行JSString以及监听WebView URL 变化 实现iOS 与 Web交互。
1、 RegisterHandler
// 将handlerName 保存起来
_base.messageHandlers[handlerName] = [handler copy];
2、CallHandler
message字段处理(需要回调时将responseCallback按唯一callbackId保存)—>message 转json字符串—>WebView 执行JSString
3、消息处理
messageString 转数组
遍历
处理：取每条消息，看是否有responseId，有则是iOS端调Web端之后所需要的回调。没有则就是Web主动调iOS所发送数据。
if (responseId) {
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
responseCallback(message[@"responseData"]);
[self.responseCallbacks removeObjectForKey:responseId];
} else {
WVJBResponseCallback responseCallback = NULL;
NSString* callbackId = message[@"callbackId"];
if (callbackId) {
responseCallback = ^(id responseData) {
if (responseData == nil) {
responseData = [NSNull null];
}
WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];
};
} else {
responseCallback = ^(id ignoreResponseData) {
// Do nothing
};
}
WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
if (!handler) {
NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
continue;
}
handler(message[@"data"], responseCallback);
}
Class: WebViewJavascriptBridge_JS
一段字符串，同时也是真正的bridge， 通过WebView 执行JSString 将 全局变量WebViewJavascriptBridge放在Web 页面的JS 中。
window.WebViewJavascriptBridge = {
registerHandler: registerHandler,
callHandler: callHandler,
disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
_fetchQueue: _fetchQueue,
_handleMessageFromObjC: _handleMessageFromObjC
};
``
不管Web页面怎么变，JSBridge 是不变的，仅仅提供几个交互的方法就够了，所以这一块被提取出来，以string 的形式存放在三方库的文件 WebViewJavascriptBridge_JS.m中，需要用时注入页面就行。这也是这个三方库架构设计很合理的地方。
- Class: WKWebViewJavascriptBridge
跟WebViewJavascriptBridge功能类似，仅仅为WKWebView 做些特殊处理。
### Web 端要做的
- 注入bridge
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback);
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
当然web端没有必要自己保存JSBridge，只是通过 “WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; ” 来触发iOS 端将JSBridge 注入页面。
- 如果需要被iOS 调用则registerHandler
bridge.registerHandler('JSToDo', function(data, responseCallback) {
var a = document.createElement("span");
a.innerText = "hello !!!!";
document.documentElement.appendChild(a);
responseCallback(data)
})
- 如果需要调iOS 则callHandler
window.WebViewJavascriptBridge.callHandler('OCToDo',{name:'carson'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
前面说了web 不能主动调iOS, 那web callHandler 时也是只能触发一个特定url 请求，同时将数据放在页面上，iOS监听到url 则去获取页面数据。实现Web 调iOS。
##总结
其实重点很少，也提了很多次，也就是WebView 执行JSString 实现调web, web 触发特定URL 让原生监听到，执行相应操作，实现web调iOS 。当然JSCore 出现之后就不再是这个原理了，比这直接很多，最前面的原理也提到了。
这个库也还是有很多值得学习的地方，包括观察者模式，web和原生都只管注册和调用就够了。还有将JSBridge 的抽象出来，放在三方库中，简化了很多web代码。
作者：carson6931
链接：https://www.jianshu.com/p/a07645a6169f
来源：简书
有兴趣交流的可以加下我QQ：1390842748
