iOS与JS交互之UIWebView-JSExport协议
前言
“iOS与JS交互”。iOS指iOS
原生代码(文章只有OC
示例),JS指WEB
前端(不单指JavaScript
),交互指JS调用iOS
和iOS调用JS
。将iOS与JS交互总结成了6种方式,并将逐一介绍。
目录如下:
- iOS与JS交互之UIWebView-协议拦截
- iOS与JS交互之UIWebView-JavaScriptCore框架
- iOS与JS交互之UIWebView-JSExport协议
- iOS与JS交互之WKWebView-协议拦截
- iOS与JS交互之WKWebView-WKScriptMessageHandler协议
- iOS与JS交互之WKWebView-WKUIDelegate协议
一、JS调用iOS:
-
实现逻辑:点击JS的登录按钮,JS将登录成功后的token数据传递给iOS,iOS将收到的数据展示出来。
-
实现效果:
JS调用iOS实现效果 -
JS代码:
//! 登录按钮 <button onclick = "login()" style = "font-size: 18px;">登录</button> //! 登录 function login() { var token = "js_tokenString"; loginSucceed(token); } //! 登录成功 function loginSucceed(token) { var action = "loginSucceed"; OCJSBridge.jsToOc(action, token); }
- iOS代码:
//! 导入JavaScriptCore框架头文件 #import <JavaScriptCore/JavaScriptCore.h> @protocol OCJSExport <JSExport> //! 为OC的-jsToOC:params:方法起个JS认识的别名jsToOc JSExportAs(jsToOc, - (void)jsToOc:(NSString *)action params:(NSString *)params); @end //! UIWebViewJSExportController遵守OCJSExport协议 @interface UIWebViewJSExportController () <UIWebViewDelegate, OCJSExport> #pragma mark - JSExport functions //! 实现OCJSExport协议的方法 - (void)jsToOc:(NSString *)action params:(NSString *)params { dispatch_async(dispatch_get_main_queue(), ^{ [UIWebViewJSExportController showAlertWithTitle:action message:params cancelHandler:nil]; }); } #pragma mark - UIWebViewDelegate //! UIWebView在每次加载请求完成后会调用此方法 - (void)webViewDidFinishLoad:(UIWebView *)webView { //! 获取JS代码的执行环境/上下文/作用域 JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //! 在context注册OCJSBridge对象为self context[@"OCJSBridge"] = self;//!< 有循环引用问题 }
- 实现原理:
1、JS与iOS约定好OCJSBridge
类名和jsToOc
方法,作为JS调用iOS的入口OCJSBridge.jsToOc
;
2、iOS创建遵守JSExport
协议的OCJSExport
协议,在该协议中声明-jsToOc:params:
方法(起个别名jsToOc
);
3、UIWebViewJSExportController
遵守OCJSExport
协议,实现该协议中的-jsToOc:params:
方法;
4、iOS通过[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]
获取JS代码的上下文JSContext
;
5、iOS通过context[@"OCJSBridge"] = self;
在context注册OCJSBridge
对象为self(UIWebViewJSExportController的实例)
;
3、JS调用OCJSBridge.jsToOc
方法,iOSUIWebViewJSExportController
的-jsToOc:params:
方法会响应JS的调用请求和参数;
PS1:JS的方法命名规则与OC不一样,当
OCJSExport
协议中的方法有多个参数时,需要使用JSExportAs(<#PropertyName#>, <#Selector#>)
为OC方法起个别名。否则,JS就需要很别扭的使用OCJSBridge.jsToOcParams
来调用OC的-jsToOc:params:
方法(无参数和单参数时可不起别名)。
PS2:
context[@"OCJSBridge"] = self;
会有循环引用问题,导致self的-dealloc
方法不被执行。因为JS中没有弱引用,所以__weak
在这里不起作用。一般来说,可以使用单独的类来处理OCJSExport
协议的相关方法,以解决此问题(比如:context[@"OCJSBridge"] = [OCJSBridge new];
)。
二、iOS调用JS:
iOS调用JS方式与上篇文章一致,都是通过JavaScriptCore框架提供的能力来实现的:
1、使用JSContext的
-evaluateScript:
方法执行一段JS代码ocToJs('loginSucceed', 'oc_tokenString')
;2、先通过
[context[@"ocToJs"]
获取到JS的ocToJs
方法对应的JSValue,然后使用JSValue的-callWithArguments:
方法调用JS的ocToJs
方法。3、获取工程源码