WKWebView的使用与JS交互详细解读
前言:
WKWebView 这是在iOS8.0之后增加的一个比UIWebView更加完善和强大的控件!看网上关于它的博客也是有许多的了,从各个方面总结一下这个WKWebView看网上说它主要是为了和JS做好交互产生的,我们也会相应的尝试一下。就先从它基本的说起!
一:和UIWebView相比它的不同处
1:和JS更好的做交互,也支持H5的一些新特性
2:加载进度条(下面会演示)
3:性能高,加载变得更快更可靠
二:从加载一张网页开始
1:使用这个WKWebView是要#import <WebKit/WebKit.h>
2:遵守协议,WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler(最后这个协议留神一下就知道视为JS准备的)
3:加载百度试一下
WKWebView * webviwe = [[WKWebView alloc]initWithFrame:self.view.bounds];
[webviwe loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
[self.view addSubview:webviwe];
三:说说加载进度条
这个是利用KVO模式写的,WKWebView有一个 estimatedProgress 属性,利用它来监听加载的进度,下面的进度打印出来了,但具体的进度条就没有写出来,你们可以自己写一个 UIProgressView 放在导航栏的下面。
// estimatedProgress WKWebView 这个属性添加观察者
[webviwe addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
if (object == webviwe && [keyPath isEqualToString:@"estimatedProgress"] ) {
// 这里就不写进度条了,把加载的进度打印出来,进度条可以自己加上去!
CGFloat newProgress = [[change objectForKey:NSKeyValueChangeNewKey] floatValue];
NSLog(@"%f",newProgress);
}
}
看看打印的进度信息:
2016-08-11 14:44:17.237 RaectiveCocoaTest[21054:252565] 页面开始加载
2016-08-11 14:44:17.724 RaectiveCocoaTest[21054:252565] 0.300000
2016-08-11 14:44:17.726 RaectiveCocoaTest[21054:252565] 内容正在加载当中
2016-08-11 14:44:18.000 RaectiveCocoaTest[21054:252565] 0.719984
2016-08-11 14:44:18.196 RaectiveCocoaTest[21054:252565] 1.000000
2016-08-11 14:44:18.196 RaectiveCocoaTest[21054:252565] 页面加载完成
四:详细的方法使用说明以及注释
详解 WKNavigationDelegate 代理方法,我们把它的代理方法使用代码以及注意点全都写出来,注意看下面的注释!
#pragma mark - WKNavigationDelegate
// 页面加载开始 Provisional临时的
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation
{
NSLog(@"页面开始加载");
}
// 加载内容
-(void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation
{
NSLog(@"内容正在加载当中");
}
// 页面加载完成
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
NSLog(@"页面加载完成");
}
// 页面加载失败
-(void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error
{
NSLog(@"页面加载失败");
}
// 接收到服务器重新配置请求之后再执行
-(void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation
{ }
// API是根据WebView对于即将跳转的HTTP请求头信息和相关信息来决定是否跳转
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
NSURLRequest * request = navigationAction.request;
NSLog(@"%@",request.URL.absoluteString); // 判断请求头是否是 https://www.baidu.com 如果是就不在请求加载跳转
WKNavigationActionPolicy actionPolicy = WKNavigationActionPolicyAllow;
if ([request.URL.absoluteString hasPrefix:@"https://www.baidu.com"]) { actionPolicy = WKNavigationActionPolicyCancel; }
// 必须这样执行,不然会崩
decisionHandler(actionPolicy);
}
/**
*
要是允许跳转,看下面的打印内容,注意加载的顺序!和下面的方法进行比较,区分它们的不同之处
2016-08-11 13:55:12.628 RaectiveCocoaTest[18155:211964] https://www.baidu.com/
2016-08-11 13:55:12.629 RaectiveCocoaTest[18155:211964] 页面开始加载
2016-08-11 13:55:13.725 RaectiveCocoaTest[18155:211964] 内容正在加载当中
2016-08-11 13:55:14.681 RaectiveCocoaTest[18155:211964] 页面加载完成
*
*/
// API是根据客户端受到的服务器响应头以及response相关信息来决定是否可以跳转
-(void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler
{
NSLog(@"%@",navigationResponse.response);
/**
* 判断响应的数据里面的URL是https://www.baidu.com/开头的,要是就不让它加载跳转
*/
WKNavigationResponsePolicy responsePolicy = WKNavigationResponsePolicyAllow;
if ([navigationResponse.response.URL.absoluteString hasPrefix:@"https://www.baidu.com/"]) { responsePolicy = WKNavigationResponsePolicyCancel;
}
decisionHandler(responsePolicy);
}
/**
*
响应返回的的URL包含了https://www.baidu.com/,所以页面是不能被加载的,要是能加载就有下面的打印信息,注意和上面方法的区分对比!
2016-08-11 13:53:38.392 RaectiveCocoaTest[17961:209778] 页面开始加载
2016-08-11 13:53:38.675 RaectiveCocoaTest[17961:209778] https://www.baidu.com/
2016-08-11 13:53:38.678 RaectiveCocoaTest[17961:209778] 内容正在加载当中
2016-08-11 13:53:38.936 RaectiveCocoaTest[17961:209778] 页面加载完成
*/
五:说说WKUIDelegate和JS的简单交互
先看看 WKUIDelegate里面的代理方法都是用来做什么的,我们一个一个的解释这几个代理方法;
// 创建方法,这个就不在多说了,重点放在下面几个
-(nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures
{
return nil;
} // ios 9 之后才有的方法
-(void)webViewDidClose:(WKWebView *)webView
{ }
下面这三个方法根据方法前面的字面意思就能区分记住!
runJavaScriptAlert 方法注意点
1.在JS端调用alert函数时,会触发此代理方法。
2.JS端调用alert时所传的数据可以通过message,打印message信息读取出JS端给你的信息。
3.在原生得到结果后,需要回调给JS,通过completionHandler 回调给JS
4.completionHandler 回调的参数和返回值都是空
/**
下面这三个方法根据前面的字面意思就能区分记住!
*/
// runJavaScriptAlert
// 在JS端调用alert函数时,会触发此代理方法。
// JS端调用alert时所传的数据可以通过message,打印message信息读取出JS端给你的信息。
// 在原生得到结果后,需要回调给JS,通过completionHandler 回调给JS
// completionHandler 回调的参数和返回值都是空
-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{ UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"alert"message:@"JS调用alert"preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { }]]; [self presentViewController:alert animated:YES completion:NULL];
NSLog(@"%@", message); }
runJavaScriptTextInput 注意点
1.要求用户输入一段文字
3.在原生输入得到文本内容后,通过completionHandler回调给JS
4.大家注意这个回调的completionHandler参数是字符串
// runJavaScriptTextInput
// 要求用户输入一段文本
// 在原生输入得到文本内容后,通过completionHandler回调给JS 大家注意这个回调的completionHandler参数是字符串
-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler
{ }
runJavaScriptConfirmPane(ConfirmPane字面意思是确认框)
1.JS端调用confirm函数时,会触发此方法
2.通过message可以拿到JS端所传给我们数据
3.在iOS端显示原生alert得到YES/NO后,通过completionHandler回调给JS端
4.注意这个completionHandler回调的参数是BOOL类型的
-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler
{ }
要有什么问题或者发现错误的地方,及时留言联系我,立马改正!
WKWebView的使用与JS交互详细解读的更多相关文章
- UIWebView和WKWebView的使用及js交互
UIWebView和WKWebView的使用及js交互 web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复 ...
- WKWebView新特性及JS交互
引言 一直听说WKWebView比UIWebView强大许多,可是一直没有使用到,今天花了点时间看写了个例子,对其API的使用有所了解,为了日后能少走弯路,也为了让大家更容易学习上手,这里写下这篇文章 ...
- iOS(WKWebView)OC与JS交互 之三
随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系统下,常用的native,js交互框架有easy-js,WebViewJavascr ...
- iOS(UIWebView 和WKWebView)OC与JS交互 之二
在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...
- 记录使用WKWebView进行OC与JS交互所踩过的坑
目录: 1.页面cookie缓存 2.允许弹出JS的弹框 3.在webview页面加载的时候,添加加载进度条 4.禁止掉webview页面的长按复制粘贴功能 5.设置webview的userAgent ...
- ios WKWebView 与 JS 交互实战技巧
一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...
- Node.js API 初解读(一)
Node.JS API 初解读 Version: NodeJs v6.2.0 一. Assert 1.简介 Assert模块主要用于断言.如果表达式不符合预期,就抛出一个错误. 该模块用于编写程序的单 ...
- Node.js API 初解读(三)
目录 Node.JS API 初解读三 Node.JS API 初解读三 Version: NodeJs v6.2.0 一. DNS (Domain Name Server) [域名服务器] 1.简介 ...
- Android BLE蓝牙详细解读
代码地址如下:http://www.demodashi.com/demo/15062.html 随着物联网时代的到来,越来越多的智能硬件设备开始流行起来,比如智能手环.心率检测仪.以及各式各样的智能家 ...
随机推荐
- jQuery扩展两类函数(对象调用,静态调用)
作者:zccst 先看小例子: $(function(){ //扩展方式1-通过对新调用 $.fn.each1=function(){ console.log("hehehehe$.fn.f ...
- tp框架中的静态验证
//制定命名空间在Home 模块下Model文件夹下 如:namespace Home\Model; //引用父类 如:use Think\Model; //实例化表 如:class ZhuCeMod ...
- JRPC 轻量级RPC框架
JRPC是一个轻量级的java RPC框架.它支持服务注册和发现. 目前它开源了,地址为:https://github.com/dinstone/jrpc. Quick Start step 1: g ...
- LearningDocker--Chapter3--Building images
This chapter is quite different from the earlier ones, and it is in this chapter to clearly describe ...
- jade的特点
jade特点 1超强的可读性 2灵活易用的缩进 3块扩展 4代码默认进过编码处理,以增强安全性 5编译及运行时的上下文错误报告 6命令行编译支持 7html5模式(使用 !!!5文档类型) 8可选的内 ...
- radioButton添加试题选项webview(二)
由于项目里radioGroup里,4个选项里加载的是webview,而不是radiobutton本身自己可设置的text类型,并且每个webview都需要和radiobutton对齐,所以这个布局有点 ...
- 分30条依次解析xml并插入数据库成功
package xxx; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import or ...
- [Angular Tutorial] 6-Two-way Data Binding
在这一步中,您将会添加一个新特性来使得您的用户可以控制电话列表中电话的顺序,动态改变顺序是由创建一个新的数据模型的特性实现的,将它和迭代器绑定在一起,并且让数据绑定神奇地处理下面的工作. ·除了搜索框 ...
- CentOS下成功修复了Windows的grub引导
(转载) 以CentOS7和Windows为双系统,且后安装CentOS时,会出现开机没有Windows引导的问题.下图,倒数第二行可以看到Windows引导项: 修复运行终端(terminal),键 ...
- [HNOI2004]Language L语言
2777: [HNOI2004]Language L语言 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 10 Solved: 5[Submit][S ...