很多时候加载网页都需要显示进度条,返回上一页和退出功能。很简单的东西,但有时候会忘记,写一个Demo作下记录。
1.用UIProgressView控件来作为进度条
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
UIProgressView *progress = [[UIProgressView alloc] initWithFrame:CGRectMake(0, 64, screenWidth, 2)];
self.progress.transform = CGAffineTransformMakeScale(1.0, 1.5);
self.progress.backgroundColor = [UIColor blueColor];
[self.view addSubview:progress];
self.progress = progress;
2.初始化WKWebView
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.allowsInlineMediaPlayback = YES;
config.allowsPictureInPictureMediaPlayback = YES;
WKWebView *web = [[WKWebView alloc] initWithFrame:CGRectMake(0, 64, screenWidth, screenHeight - 64) configuration:config];
[self.view addSubview:web];
web.navigationDelegate = self;
web.UIDelegate = self;
self.web = web;
3.添加观察者,WKWebView中的estimatedProgress属性即表示加载进度,另外记得观察者要在析构方法中移除
4.关闭按钮很简单直接pop,返回按钮判断web可以返回则返回 不能返回也pop
if ([self.web canGoBack]) {
[self.web goBack];
} else{
[self.navigationController popViewControllerAnimated:YES];
}
5.在观察者中将进度赋值到进度条
if ([keyPath isEqualToString:@"estimatedProgress"]) {
self.progress.progress = self.web.estimatedProgress;
if (self.progress.progress == 1) {
//将progress高度变成1.4倍 在开始加载网页的代理中会恢复1.5倍
__weak typeof(self)weakSelf = self;
[UIView animateWithDuration:0.25 delay:0.3 options:UIViewAnimationOptionCurveEaseOut animations:^{
weakSelf.progress.transform = CGAffineTransformMakeScale(1.0, 1.4);
} completion:^(BOOL finished) {
weakSelf.progress.hidden = YES;
}];
}
}
6.再简单实现以下web的代理方法就搞定了
#pragma mark WKNavigationDelegate
//开始加载
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
self.progress.hidden = NO;
self.progress.transform = CGAffineTransformMakeScale(1.0, 1.5);
[self.view bringSubviewToFront:self.progress]; // 将progress放到最前面
}
//加载完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
// self.progress.hidden = YES;
}
//加载失败
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error{
self.progress.hidden = YES;
}
//页面跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
//允许页面跳转
NSLog(@"%@",navigationAction.request.URL);
//如果是跳转一个新页面
if (navigationAction.targetFrame == nil) {
[webView loadRequest:navigationAction.request];
}
decisionHandler(WKNavigationActionPolicyAllow);
}
-----------------2018.4.18-------------------------
之前写过一个项目用到UIWebView与 JS交互,最近换成WK框架,发现不能用了。
还好学过一点js,然后通过自己随便写了一个简单的html本地文件,用来实现UIWebView与WKWebView跟JS之间的交互,尽量屏蔽掉了一些暂时不想关的代码,用最简单的方式实现。
UIWebView交互,引入框架<JavaScriptCore/JavaScriptCore.h>
JS调用OC用代码
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
![](https://i-blog.csdnimg.cn/blog_migrate/50d82243f4d5fb9000d25ad25fe198a7.jpeg)
注意此处的“tytest”即JS上面定义好的方法名。
写在html onclick里面的方法名。
OC调用JS方法
self.context = [self.web valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *js =[NSString stringWithFormat:@"tytest5(6)"] ;
[self.context evaluateScript:js];
一样 “tytest5”为方法名 括号里面是参数。
WKWebView交互
需要在创建的时候注入JS对象名称,即方法名
此处与UIWebView最大的不同是html的写法
图中标注1为UIWebView交互时的方法名,2为改方法在html中的声明,3才是WK交互时的对象,也就是我们之前注入的对象。这点需要注意。
然后OC调用JS的方法也是差不多的
另外还有就是WKWebView销毁时,需要注销之前注册的对象。正常释放有内存不能释放掉的问题,才引入了一个代理实现。 Demo有具体的实现方法。
***以上 项目名称TYWKWebProgress&BackDemo
(欢迎随手给一颗星星哦~)本篇博客Demo地址https://github.com/xmy0010/DemoForCSDN
本人邮箱18144200589@163.com欢迎小伙伴一起讨论,学习,进步。