很多时候加载网页都需要显示进度条,返回上一页和退出功能。很简单的东西,但有时候会忘记,写一个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"];
注意此处的“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
本人邮箱[email protected]欢迎小伙伴一起讨论,学习,进步。