WKWebView 实现iOS与H5的交互转
在iOS开发中,H5的嵌入可以通过UIWebView或者WKWebView。这两个都是继承UIView,来加载web数据的类。UIWebView是在iOS2的时候开始使用的。特点是加载速度慢,占用内存多,优化艰难。WKWebView是在iOS8苹果新推出的,加载速度快,占用内存较少,是一个不错的选择。如果想要比较两者的区别,您可以选择一个网页进行测试一下。鉴上所述,我们选择WKWebView进行开发。好了,废话不多说了。
1WKWebView创建和加载
- (void)createWebView
{
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]
// 根据需要去设置对应的属性
WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];
webView.navigationDelegate = self;
[self.view addSubview:webView];
NSURL *url = [NSURL URLWithString:self.strURL];
[self loadWebViewWithURL:url]; // JS调用OC 添加处理脚本
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];
}
2
JS调用OC代码
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];
这是利用WKWebView的一个新特性MessageHandler来处理JS调用原生方法。要实现JS调用iOS原生方法,步骤见下。
添加<WKScriptMessageHandler>协议。让控制器成为MessageHandler的代理对象。
对于监听的方法名要和JS开发的人商量好。这里我们监听的是Share方法,对于JS开发的人员必须要以以下方式写。
window.webkit.messageHandlers. Share.postMessage(null)
实现协议方法。在这个方法里message参数有一个属性body。message.body就是JS传过来的参数,可以是字符串,可以是数组,也可以是字典。通过message.name判断可以知道监听的是JS的哪个方法。
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
if ([message.name isEqualToString:@"Share"]) {
//TODO
}
}
至此,JS调用OC代码就已完结。是不是很简单。另外,我在网上也看到了不一样的处理方式。大家可以参考WebViewJavascriptBridge我觉得写的比较清楚。本人还没有尝试过这种,如果都尝试过的宝宝能不能分享一下两者的优缺点啊。
3
OC调用JS代码
[self.webView evaluateJavaScript:@"show()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
//TODO
}];
相信代码已经看得很清楚啦。show()就是JS写的方法,这个方法可传可不传参数,具体依实际情况而定。另外关于UIWebView和JS的交互,以下部分仅供参考。
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"Share"] = ^() {
NSArray *args = [JSContext currentArguments];
dispatch_async(dispatch_get_main_queue(), ^{
//TODO
});
4
关于<WKNavigationDelegate>
网页加载开始,结束,失败这几个都特别简单,我就不赘述了。说一下下面这个协议方法,这个方法发生在页面跳转中。WKNavigationActionPolicy是一个枚举,WKNavigationActionPolicyAllow表示允许跳转,WKNavigationActionPolicyCancel表示取消跳转。对了,这里还有一个补充: scrollView嵌套网页和原生view,原生view要根据网页的高度来布局。我看到不少的电商应用都有这种布局,但在算高度上会有各种问题,不知道你们有遇见过?
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
NSString *url = navigationAction.request.URL.absoluteString;
if(![url isEqualToString:self.strURL]) {
// 页面跳转
}
decisionHandler(WKNavigationActionPolicyAllow);
}
5
关于< WKUIDelegate >
不知道您有没有遇见过JS写的alert()框在iOS上不弹出。那么您有没有实现这些协议方法呢。
/// 创建一个新的WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
/// 输入框
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
/// 确认框
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
/// 警告框
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
6
获取网页标题,网页加载进度和加载状态
这是通过KVO的方式进行监听的。您可以点击进WKWebView的内部看一下,他们每个属性上面都有很长的解释,你不难发现这一段。举一个获取标题的例子。其他的类似。别忘了,KVO监听在dealloc中移除监听者哦。
8E6F0A58-609E-4093-BD65-F51A10D1703D.png
[self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:NULL];
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
if ([keyPath isEqualToString:@"title"]) {
if (object == self.webView) {
if(self.navigationController)
self.navigationItem.title = self.webView.title;
}
}
else {
[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
}
}
转载于:https://www.cnblogs.com/deng37s/p/6871913.html
WKWebView 实现iOS与H5的交互转相关推荐
- iOS JS与OC交互
iOS JS与OC交互 本文内容导航 1.`UIWebView` JS 与 OC 交互 1.1 OC 调用 JS 函数 1.1.1 OC 拼接 JS 字符串调用 JS 方法 1.1.2 使用 JSCo ...
- WKWebView和UIWebView及其四种交互
** UIWebView 官方文档翻译 ** 继承关系:NSObject→UIResponder→UIView-→UIWebView 遵循:NSCoding NSObject UIAppearance ...
- Swift5+WkWebView实现APP嵌套H5页面
Swift5+WkWebView实现APP嵌套H5页面 前言 一.Swift5和JS交互 1.类型一:有返回值 2.类型二:无返回值 3.app回调js方法 二.Swift5修改JS的window.a ...
- 安卓Android与H5双向交互MathJax展示数学公式(源码+解析)
安卓Android与H5双向交互MathJax展示数学公式(源码+解析) 博主就今天周五又做了个需求(安卓Android与H5交互),原来上线的功能是服务器配置过来的学习报告(一个H5页面)并提供原始 ...
- iOS小技能:iOS与H5打通进行数据传输
文章目录 前言 I 方案一:拦截WebView请求 1.1 修改UserAgent(支持UIWebView控件和WKWebView控件) 1.2 判断当前发送的请求是否符合协定的格式. 1.3 二次加 ...
- ios开发学习-手势交互(Gesture)效果源码分享
qianqianlianmeng ios开发学习-手势交互(Gesture)效果源码分享 All Around Pull View 介绍:实现视图四个方向(上下左右)都能够拖动更新(pull to r ...
- 解决iOS微信H5支付跳转微信后不返回App问题(Swift-WKWebview)(转)
解决iOS微信H5支付跳转微信后不返回App问题(Swift-WKWebview)(转) 参考文章: (1)解决iOS微信H5支付跳转微信后不返回App问题(Swift-WKWebview)(转) ( ...
- iOS: JS和Native交互的两种方法,iosjsnative交互
iOS: JS和Native交互的两种方法,iosjsnative交互 背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)string ...
- android webview调js方法,Android中WebView与H5的交互,Native与JS方法互调
项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...
最新文章
- 比较有趣的一个笔试题目
- java mysql语句_java mysql查询语句怎么写
- 元气骑士没有手柄怎么解锁机器人_机器人怎么解锁(元气骑士机器人)
- 运维监控再添新品,F5联合智维数据推出应用质量主动拨测解决方案
- python包路径有几个_python的搜索路径与包(package)
- macos 判断走无线网还是有线网_“第一次约会,就想发生关系”:怎样判断男人对你走心还是走肾?...
- C 标准库 —— ctypes.h
- 实用主义当道——GitHub 热点速览 Vol.48
- HTML <progress>标签
- 节奏大师显示服务器,节奏大师上线首日登录困难 服务器拖累腾讯游戏
- 用vivo手机拍照一定要先打开这个设置,不然白浪费这么强大的手机
- ES学习构建EKL海量日志分析平台
- 数据库应用——DQL查询数据(连表查询 子查询 详细案例)
- JUC-II CPU的微程序设计 计算机组成原理课程设计 微指令编码
- PrintWriter的print和write输出区别
- 强大的python中如何画出美观的散点图
- 软件功能测试包含了哪些测试项目?功能测试报告收费标准
- 考研 英语一 大作文-图画作文 (一)----第一段描述图画写作攻略
- Discuz!教程之大型Discuz!论坛站点帖子表forum_post分表方案优化
- LS-GAN作者诠释新型GAN:条条大路通罗马,把GAN建立在Lipschitz密度上