iOS WKWebView实现JS与Objective-C交互(一)
栏目: Objective-C · 发布时间: 5年前
内容简介:前言: 根据需求有时候需要用到JS与Objective-C交互来实现一些功能, 本文介绍实现交互的一种方式, 使用WKWebView的新特性MessageHandler, 来实现JS调用原生, 原生调用JS.一. 基础说明WKWebView 初始化时,有一个参数叫configuration,它是WKWebViewConfiguration类型的参数,而WKWebViewConfiguration有一个属性叫userContentController,它又是WKUserContentController类型
前言: 根据需求有时候需要用到JS与Objective-C交互来实现一些功能, 本文介绍实现交互的一种方式, 使用WKWebView的新特性MessageHandler, 来实现JS调用原生, 原生调用JS.
一. 基础说明
WKWebView 初始化时,有一个参数叫configuration,它是WKWebViewConfiguration类型的参数,而WKWebViewConfiguration有一个属性叫userContentController,它又是WKUserContentController类型的参数。WKUserContentController对象有一个方法- addScriptMessageHandler:name:,我把这个功能简称为MessageHandler。- addScriptMessageHandler:name:有两个参数,第一个参数是userContentController的代理对象,第二个参数是JS里发送postMessage的对象。
所以要使用MessageHandler功能,就必须要实现WKScriptMessageHandler协议。
二. 在JS中使用方法
用法出处
js文件代码实例
function locationClick() { /// "showMessage". 为我们和前端开发人员的约定 window.webkit.messageHandlers.showMessage.postMessage(null); }
在ViewController 我们需要做哪些事情
2.1 对WKWebView进行初始化以及设置
/// 创建网页配置对象 WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]; /// 创建设置对象 WKPreferences *preference = [[WKPreferences alloc]init]; /// 最小字体大小 当将javaScriptEnabled属性设置为NO时,可以看到明显的效果 preference.minimumFontSize = 40.0; /// 设置是否支持javaScript 默认是支持的 preference.javaScriptEnabled = YES; /// 在iOS上默认为NO,表示是否允许不经过用户交互由javaScript自动打开窗口 preference.javaScriptCanOpenWindowsAutomatically = YES; config.preferences = preference; /// 这个类主要用来做native与JavaScript的交互管理 _wkwebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:config]; [self.view addSubview:_wkwebView]; /// Load WebView #if 0 NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://m.benlai.com/huanan/zt/1231cherry"]]; [self.wkwebView loadRequest:request]; #endif #if 1 NSString *bundleStr = [[NSBundle mainBundle] pathForResource:@"summerxx-test" ofType:@"html"]; [self.wkwebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:bundleStr]]]; #endif // UI代理 _wkwebView.UIDelegate = self; // 导航代理 _wkwebView.navigationDelegate = self; // 是否允许手势左滑返回上一级, 类似导航控制的左滑返回 _wkwebView.allowsBackForwardNavigationGestures = YES; // 添加监测网页加载进度的观察者 [self.wkwebView addObserver:self forKeyPath:@"estimatedProgress" options:0 context:nil]; // 添加监测网页标题title的观察者 [self.wkwebView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil];
2.2 在合理地方进行注册
[self.wkwebView.configuration.userContentController addScriptMessageHandler:self name:@"showMessage"];
2.3 接收JS给我们传递消息, 这里我做了一个简单的弹窗提示
#pragma mark - WKScriptMessageHandler /// 通过接收JS传出消息的name进行捕捉的回调方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.name isEqualToString:@"showMessage"]) { UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"title" message:@"messgae" preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"同意" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { NSString *jsStr = [NSString stringWithFormat:@"setLocation('%@')",@"虽然我同意了你, 但是答应我别骄傲."]; [self.wkwebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) { NSLog(@"%@----%@",result, error); }]; }]; UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"cancel" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) { NSLog(@"cancel"); }]; UIAlertAction *errorAction = [UIAlertAction actionWithTitle:@"拒绝" style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) { NSString *jsStr = [NSString stringWithFormat:@"setLocation('%@')",@"虽然我拒绝了你, 但是继续爱我好吗"]; [self.wkwebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) { NSLog(@"%@----%@",result, error); }]; }]; [alertController addAction:errorAction]; [alertController addAction:okAction]; [alertController addAction:cancelAction]; // 出现 [self presentViewController:alertController animated:YES completion:^{ }]; } }
2.3 销毁
- (void)dealloc { /// Remove removeObserver [_wkwebView removeObserver:self forKeyPath:NSStringFromSelector(@selector(estimatedProgress))]; [_wkwebView removeObserver:self forKeyPath:NSStringFromSelector(@selector(title))]; WKUserContentController *userCC = self.wkwebView.configuration.userContentController; [userCC removeScriptMessageHandlerForName:@"showMessage"]; }
Demo: 演示步骤, 点击获取定位 Objective-C获取到JS消息
点击拒绝, JS获取到Objective-C传递的消息
如图:
总结: 脑壳疼
参照 : https://www.jianshu.com/p/433e59c5a9eb
demo: 之后传
完~
文/ 夏天然后
以上所述就是小编给大家介绍的《iOS WKWebView实现JS与Objective-C交互(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 基于QMP实现对qemu虚拟机进行交互
- 用Asp与XML实现交互的一个实例源码
- 利用expect命令实现Shell自动化交互的方法详解
- 网易云音乐数据交互—async&await实现版(完结篇) 荐
- 利用 Python 中 Bokeh 实现数据可视化,第二部分:交互
- 二十分钟封装,一个 App 前后台 Http 交互的实现
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。