iOS开发 WKWebView实现JS交互
2024-10-21 09:18:48
需求:利用webView加载H5页面,并实现点击H5页面的按钮触发事件,事件是调用OC的方法。
简单说就是JS调用OC的方法,这里我们选择的是WKWebView,至于为什么不用UIWebView,自行百度或者看开发文档。
实现:
1、首先应该倒入 WebKit 框架 #import <WebKit/WebKit.h>
2、懒加载一个webView
//需要的代理
<WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler> @property (nonatomic , strong) WKWebView *webView; - (WKWebView *)webView{
if (!_webView) {
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
_webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, NAVHEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT-NAVHEIGHT) configuration:config];
if (@available(iOS 11.0, *)) {
[configuration setURLSchemeHandler:self.handler forURLScheme:@"webImage"];
}
_webView.UIDelegate = self;
_webView.navigationDelegate = self;
NSURLRequest *request = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:self.structureUrl]];
[_webView loadRequest:request];
} return _webView; }
3、JS端的方法构成HTML代码:
切记在html中预留接口,格式必须是固定的:
window.webkit.messageHandlers.actionName.postMessage('parameter');
actionName:为方法名
parameter:为传递过来的参数,在html中叫做对象,到OC我们这里就是字典
举个例子:
window.webkit.messageHandlers.actionName.postMessage('parameter');
actionName:为方法名
parameter:为传递过来的参数,在html中叫做对象,到OC我们这里就是字典
这里我们没有带参数,要是需要参数,就让前端加上,你不会没关系,也不需要你会,前端知道该怎么做。
4、OC端添加JS方法处理器:
WKUserContentController *userContentController = _webView.configuration.userContentController;
[userContentController addScriptMessageHandler:self name:@"callPhone"];
[userContentController addScriptMessageHandler:self name:@"add"];
[userContentController addScriptMessageHandler:self name:@"edit"];
[userContentController addScriptMessageHandler:self name:@"delete"];
这里我们添加了了四个方法,切记着四个方法的名称无比与JS端一致。
5、实现WKScriptMessageHandler代理方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"ScriptMessage 传递的消息内容 : %@",message.body);
if ([message.name isEqualToString:@"callPhone"]) {
}
if ([message.name isEqualToString:@"add"]) {
}
if ([message.name isEqualToString:@"edit"]) {
}
if ([message.name isEqualToString:@"delete"]) {
}
}
6、在界面消失的时候清除JS方法
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated]; [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"callPhone"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"add"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"edit"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"delete"];
}
到这里就结束了,当你点击 webView 上的按钮时,就能够进入我们的OC方法里。
总结起来就三点内容:
1.前端和苹果移动端的方法名必须一致,且前端要以固定的格式来写方法,否则移动端收不到事件反馈;
2.通过 WKUserContentController 添加html中预留的方法;
3.实现 WKScriptMessageHandler 的代理方法;
最新文章
- 窥探Swift之函数与闭包的应用实例
- oracle 倒库后insert id冲突的问题
- 网络转载——java接口的概念
- [ZT]嵌入视频播放器代码
- (一)GATT Profile和GAP 简介(目前所有的BLE应用都基于GATT,所以也要了解是怎么一回事)-转发
- 用正则表达式在注册页面(js/aspx.cs)的验证
- 转:android 录制视频的Demo
- iOS开发之数据存取3-CoreData自定义数据类型
- 闭包(Closures)
- PHP函数ip2long转换IP时数值太大产生负数的解决办法
- 线程池ThreadPoolExecutor使用简介(转)
- HDU-1701-ACMer
- 今天打补丁出问题了,害得我组长被扣了1k奖金。
- LOJ6002 - 「网络流 24 题」最小路径覆盖
- plx9030触发pci中断
- VTK显示mhd,mha格式文件
- 【原创】使用golang访问windows telnet服务器
- 51Nod1634 刚体图 动态规划 容斥原理 排列组合
- 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?
- git push 和 pull 时 免密执行的方法
热门文章
- SVN检出未响应,版本库浏览打不开卡死。
- 浅谈hive
- cenots7 rpm 包升级ssh
- Linux 下查看mysql 加载的配置文件, 并且解决报错 “this is incompatible with sql_mode=only_full_group_by”
- Gitlab迁移(亲测)
- Springboot+Vue实现短信与邮箱验证码登录
- 发送QQ消息
- scrollIntoView()方法将元素滚动到浏览器窗口的可见区域
- CCF 201812-2	小明放学
- pytorch 入门