iOS与JS交互之UIWebView-JSExport协议

作者 : 开心源码 本文共2953个字,预计阅读时间需要8分钟 发布时间: 2022-05-12 共188人阅读

级别:★★☆☆☆
标签:「iOS与JS交互」「UIWebView与JS交互」「JSExport」
作者: Xs·H
审校: QiShare团队

先解释下标题:“iOS与JS交互”。iOS指iOS原生代码(文章只有OC示例),JS指WEB前台(不单指JavaScript),交互指JS调使用iOSiOS调使用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协议

本文详情如何用JSExport协议UIWebView上实现iOSJS交互。
JSExportJavaScriptCore框架里的一个协议。假如一个协议遵守了JSExport,那么该协议的方法会对JS开放,允许JS直接调使用。

一、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认识的别名jsToOcJSExportAs(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方法。


  • 可从QiShare的Github获取工程源码

续篇:iOS与JS交互之WKWebView-协议阻拦


关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章:
iOS objc_msgSend尾调使用优化机制详解
vue-cli 自动化测试 Nightwatch 详解

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » iOS与JS交互之UIWebView-JSExport协议

发表回复