iOS与JS交互之WKWebView-WKScriptMessageHandler协议

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

级别:★★☆☆☆
标签:「iOS与JS交互」「WKWebView与JS交互」「WKJSMessageHandler」
作者: 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协议

本文详情假如用WKWebViewWKScriptMessageHandler实现iOSJS交互。
WKWebViewApple在iOS8推出的Webkit框架中的负责网页的渲染与展现的类,相比UIWebView速度更快,占使用内存更少,支持更多的HTML特性。WKScriptMessageHandlerWebKit提供的一种在WKWebView上进行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";  window.webkit.messageHandlers.jsToOc.postMessage(action, token);}
  • iOS代码:
//! 导入WebKit框架头文件#import <WebKit/WebKit.h>//! WKWebViewWKScriptMessageHandlerController遵守WKScriptMessageHandler协议@interface WKWebViewWKScriptMessageHandlerController () <WKScriptMessageHandler>
//! 为userContentController增加ScriptMessageHandler,并指明nameWKUserContentController *userContentController = [[WKUserContentController alloc] init];[userContentController addScriptMessageHandler:self name:@"jsToOc"];//! 用增加了ScriptMessageHandler的userContentController配置configurationWKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];configuration.userContentController = userContentController;//! 用configuration对象初始化webView_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
#pragma mark - WKScriptMessageHandler//! WKWebView收到ScriptMessage时回调此方法- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {        if ([message.name caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {        [WKWebViewWKScriptMessageHandlerController showAlertWithTitle:message.name message:message.body cancelHandler:nil];    }}
  • 实现原理:
    1、JS与iOS商定好jsToOc方法,使用作JS在调使用iOS时的方法;
    2、iOS用WKUserContentController-addScriptMessageHandler:name:方法监听namejsToOc的消息;
    3、JS通过window.webkit.messageHandlers.jsToOc.postMessage()的方式对jsToOc方法发送消息;
    4、iOS在-userContentController:didReceiveScriptMessage:方法中读取namejsToOc的消息数据message.body

PS:[userContentController addScriptMessageHandler:self name:@"jsToOc"]会引起循环引使用问题。一般来说,在合适的时机removeScriptMessageHandler可以处理此问题。比方:在-viewWillAppear:方法中执行add操作,在-viewWillDisappear:方法中执行remove操作。如下:

- (void)viewWillAppear:(BOOL)animated {        [super viewWillAppear:animated];        [_webView.configuration.userContentController addScriptMessageHandler:self name:@"jsToOc"];}- (void)viewWillDisappear:(BOOL)animated {        [super viewWillDisappear:animated];        [_webView.configuration.userContentController removeScriptMessageHandlerForName:@"jsToOc"];}

二、iOS调使用JS:

iOS调使用JS方式与上篇文章一致,都是通过WKWebView的-evaluateJavaScript:completionHandler:方法来实现的。


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

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


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

推荐文章:
不一样的React context

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

发表回复