一、选择
项目本身webview使用的是WKWebview,其实WKWebview自带的messageHandle也可以满足此需求
JSContext,源自于JavaScriptCore框架中的东西,最后不使用此方案源于一下几点
但是其中繁杂的字符串使用,让我觉的可能会由于粗心出现不可预知的错误
加载时机的问题,当你重新loadrequest的时候,会导致js注入失败
回调方法略复杂
JavaScriptBridge,最后选择此库源于以下几点
使用简单,注册完毕之后设置完代理,只需要负责注册方法和调用方法
回调简单,两端回调responsecallback包含在注册的方法中。使用block
三端通用,JavaScript和iOS、Android都可以(Android版本库)
Ps :关于Android版本库,其中很多是按照iOS版的JavaScriptBridge改写的。但是其中有很多问题,尤其是各种调用时机问题,上面的链接是经过我旁边的Android小哥试了四五个版本之后发现的,修复了各种改写版的问题
二、使用
首先需要引入WebViewJavascriptBridge库
#import "WebViewJavascriptBridge.h"
初始化,此处为了方便子类使用,所以在基类中注册bridge,并return bridge对象,方便子类调用
#pragma mark - 桥接- (void)InitializeWebViewJavascriptBridge { // 注册桥接 self.bridge = [SWHybridManager setJavaScriptBridgeWithWebView:self.webView controller:self]; } [WKWebViewJavascriptBridge enableLogging];WKWebViewJavascriptBridge *bridge = [WKWebViewJavascriptBridge bridgeForWebView:webView]; [bridge setWebViewDelegate:controller];
注册方法供JavaScript调用
__weak typeof(controller)wController = controller;/****************************公共方法注册-Start*********************/ //MARK:打开窗体 [bridge registerHandler:HandlerFunctionNameOpenWindow handler:^(id data, WVJBResponseCallback responseCallback) { __strong typeof(wController)sController = wController; NSLog(@"\n调用了openWindow: %@", data); NSDictionary *dict = (NSDictionary *)data; SWOpenWindowModel *model = [SWOpenWindowModel yy_modelWithDictionary:dict]; [self pushViewController:sController data:model responseCallback:responseCallback]; }];
调用JavaScript方法
[self.bridge callHandler:callFunctionNameGetSearchKeyWord data:json];
三、方法名定义
因为方法名的定义是字符串,所以建议采用常量字符串,防止拼写错误
其次不建议采用宏定义
我采用以下方法
桥接管理类的.h
/**打开窗体 */FOUNDATION_EXPORT NSString *const HandlerFunctionNameOpenWindow;/** 关闭窗口*/FOUNDATION_EXPORT NSString *const HandlerFunctionNameCloseWindow;
桥接管理类的.m
/**打开窗体 */NSString *const HandlerFunctionNameOpenWindow = @"openWindow";/** 关闭窗口*/NSString *const HandlerFunctionNameCloseWindow = @"closeWindow";
使用时直接使用常量字符串即可
注意点:如类似我使用在基类传入控制器和webview到管理类中,在类中使用controller要注意循环引用,否则会导致控制器无法释放
+ (WKWebViewJavascriptBridge *)setJavaScriptBridgeWithWebView:(WKWebView *)webView controller:(__kindof SWBaseWebViewController *)controller; __weak typeof(controller)wController = controller; // 弱引用传入控制器__strong typeof(wController)sController = wController; // 在block内部强引用
四、数据传输
iOS端直接返回字典即可
我代码中是返回json字符串,为了与Android统一,方便H5解析数据
五、JavaScript代码
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 = 'https://__bridge_loaded__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) }
setupWebViewJavascriptBridge(function(bridge) { /* Initialize your app here */ bridge.registerHandler('JS Echo', function(data, responseCallback) { console.log("JS Echo called with:", data) responseCallback(data) }) bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) { console.log("JS received response:", responseData) }) })
六、注意事项
如果产生调用不通的问题,多为JavaScript调用时机问题
注意桥接的代理
作者:Pnyg_回眸
链接:https://www.jianshu.com/p/58d6f2f4c5db