iOS开发 WKWebView实现JS交互
需求:利用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 的代理方法;
iOS开发 WKWebView实现JS交互的更多相关文章
- ios WKWebView 与 JS 交互实战技巧
一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...
- iOS下原生与JS交互(总结)
iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇(我自己用的方式二,简单方便) 方式一 第一种方式是用JS ...
- iOS开发--OC调用JS篇
OC调用JS篇 其中相对应的html部分如下: <html> <header> <meta http-equiv="Content-Type" con ...
- 转载 【iOS开发】网页JS与OC交互(JavaScriptCore) OC ----->JS
目标 本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互.我们想要达到的目标是: OC调用网页上的js方法 网页js调用APP中的OC方法 ...
- WKWebView与JS交互,UIWebView+JavascriptCore和JS交互
最近一直在做有关Swift和JavaScript交互的程序,所以有关UIWebView和WKWebView在使用上的差别在此总结下: UIWebView: (1)创建 var webView: UIW ...
- WKWebView与Js交互
首先打开webstorm,将最下面h5拷贝到html中.然后导入工程 #define kMessageHandlerName @"mymobile" 1.创建配置类 - (WKWe ...
- iOS中UIWebView使用JS交互
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
- WKwebView与JS交互(h5主动)
先:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler // 创建一个webiview的配置项 WKWebViewConfiguratio ...
- iOS中UIWebView使用JS交互 - 机智的新手
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
- iOS web view 与 js 交互
移动应用中许多复杂的且经常改动的页面会使用H5进行代替native,这里就会使用到js和webview的交互 iOS里面,UIWebView提供了方法stringByEvaluatingJavaScr ...
随机推荐
- ASP.NET Core MVC中调用Json()时默认使用Newtonsoft.Json返回数据
1.需要安装两个包 Newtonsoft.Json Microsoft.AspNetCore.Mvc.NewtonsoftJson 2. Startup 类中的 ConfigureServices 方 ...
- dfs-入门模板
模板 void dfs()//参数用来表示状态 { if(到达终点状态) { ...//根据题意添加 return; } if(越界或者是不合法状态) return; if(特殊状态)//剪枝 ret ...
- cisco的telnet远程登入
Cisco配置telnet登入 拓扑图: IP地址表: 设备 IP地址 PC0 192.168.1.1 Switch0 vlan1:192.168.1.254 1.不需要用户的telnet登入 Swi ...
- ChatGPT回答的关于maxscript + python
- Flask + PyInstaller = 客户端
Flask + PyInstaller = 客户端 有些特殊情况需要开发客户端,Python有几个常用的几个GUI框架,如 PyQt.wxPython等 但使用这些GUI框架往往界面比较丑,而且GUI ...
- MeterSphere中dubbo接口测试分享
一.域名解释 1.1.接口文档:UserAccountAssetServiceI.getUserAccountVirtualAsset UserAccountAssetServiceI(接口名,需要用 ...
- SpringBoot代理图片、文件等路径
在config文件夹下新增一个配置类即可 /** * @author cyl * @time 2022/10/25 */ @Configuration public class UrlConfig e ...
- python运行脚本报错Non-UTF-8
写完脚本运行报:SyntaxError: Non-UTF-8 code starting with '\xa1' in file/createuser/test.py on line 1, but n ...
- vscode中配置代码片段
首先我们需要把要配置的代码复制一下,如: 然后我们进入https://snippet-generator.app/网站, 进入网站之后就把你复制的代码粘贴到左边的框里面,然后就是代码的类型和命名了 写 ...
- Kubernetes--Pod生命周期中的重要行为
Pod生命周期中的重要行为 除了创建应用容器(主容器及其辅助容器)之外,用户还可以为Pod对象定义其生命周期中的多种行为,如初始化容器.存活性探测及就绪性探测等. 初始化容器 初始化容器 (init ...