一起学习WKWebView使用(2)

之前把基本的学会了,这次该研究研究其他的功能,想想别的app上都有哪些功能,试着实现以下:

1.看文档找找 这个属性的意思是估算加载的进度类型是double,只读的看来可以用它来实现网页加载的进度展示

estimatedProgress //An estimate of what fraction of the current navigation has been loaded.

想一想,加载网页一般上面有一条蓝线来显示进度,就实现这个吧

//先弄个属性
@property (strong, nonatomic) UIProgressView *progressView;
//添加到视图上
[self.view addSubview:self.progressView];

懒加载一下吧,让它在状态栏下面显示,样式就默认吧

-(UIProgressView *)progressView{
    if (_progressView==nil) {
        _progressView= [[UIProgressView alloc]initWithProgressViewStyle:UIProgressViewStyleDefault];
        _progressView.frame=CGRectMake(0, 20, self.view.bounds.size.width, 2);
    }
    return _progressView;
}

接下来就是监听这个属性值得变化,然后赋值给UIProgressView的属性上让他展示出来进度,思路就是这样,我那个偷懒就用ReactiveCocoa(这个框架真的很厉害) 框架了,上代码

//这里是就实现了监听绑定信号
 RACSignal *sign=RACObserve(self.webView, estimatedProgress);
//这里就可以拿来用每次值改变都会调这个block里的代码
   @weakify(self);
    [sign subscribeNext:^(id x) {
        @strongify(self);
      //当进度为一完全加载完就让进度条隐藏吧
        if ([x floatValue]==1) {
            self.progressView.hidden=YES;
        }
      //复值
        self.progressView.progress=[x floatValue];
    }];

记得在每次新请求的时候把progressView显示出来,加上一句

-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
   NSLog(@"%s",__FUNCTION__);
    self.progressView.hidden=NO;
    self.hud=[MBProgressHUD showHUDAddedTo:self.view animated:YES];
}

算上上一篇的基本效果 进度条实现了 来看一下效果

进度git.gif
2.点着点着页面发现问题了,凡是另开一个网页的点击都不好用了,在当前页面刷新的可以用,解决吧。。。
2016年12月29日 11-11-51.png

先开始找属性,看有没有允许跳转页面重新reload的属性,找了半天没发现,再找代理吧,感觉这是导航出现的问题,找WKNavigationDelegate的代理方法试试。

找到这俩个能决定是否允许一个导航

  • webView:decidePolicyForNavigationAction:decisionHandler:
    //Decides whether to allow or cancel a navigation.
  • webView:decidePolicyForNavigationResponse:decisionHandler:
    //Decides whether to allow or cancel a navigation after its response is known.

看看代理给里面参数里面是否有能判断出是否是打开一个新的页面
WKNavigationAction这个参数类里面有这么一个属性 嘿嘿,说是导航若开一个新窗口值为nil,先来试试

//The target frame, or nil if this is a new window navigation.
@property (nullable, nonatomic, readonly, copy) WKFrameInfo *targetFrame;

代码打印一下到底有啥区别

-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    NSLog(@"targetFrame%@",navigationAction.targetFrame);
}

一运行崩了。。。。仔细一看应该是后面block参数没有用,看了下解释明白里面既然这是决定是否允许访问的代理,当然要回调一下啊。。。加上下面一句,参数是个枚举类型,一看就懂了,一个是允许,一个是取消。那这个地方可以做一些访问的过滤 来个允许:

//  WKNavigationActionPolicyCancel,
//  WKNavigationActionPolicyAllow,
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
 NSLog(@"targetFrame%@",navigationAction.targetFrame);
 decisionHandler(WKNavigationActionPolicyAllow);
}

然后点击看看有啥区别
1.点击本页跳转打印的东西


2016年12月29日 11-44-46.png

2.点击那个不跳的打印的东西 哈哈

2016年12月29日 11-48-03.png

这样能判断出来了吧,再就是解决让他跳啊,最终代理里代码如下

-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    NSLog(@"targetFrame%@",navigationAction.targetFrame);
    if (navigationAction.targetFrame==nil) {
        [self.webView loadRequest:navigationAction.request];
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

点进去试试,成功~效果:

2016年12月29日 11-52-31.png

3.点进去后又有需求了....我要回去之前的页面啊,接着踩坑吧
碰巧最近发现一个比较好用的开源---让任意View都可以拖动 - WMDragView(就一个类,很简单实用)
正好练习一下,用这个做一个返回按钮
引入头文件 设置一个属性

#import "WMDragView.h"
@property (strong, nonatomic) WMDragView *backView;

添加进View中

   //给他个位置
    self.backView = [[WMDragView alloc] initWithFrame:CGRectMake(self.view.frame.size.width-50, self.view.frame.size.height-150, 50, 50)];
    //圆角
   self.backView.layer.cornerRadius = 25;
   self.backView.backgroundColor= [UIColor colorWithRed:(223.0)/255.0 green:(107.0)/255.0 blue:(93.0)/255.0 alpha:0.8f];
    //是不是保持在边界,默认为NO,没有黏贴边界效果
   self.backView.isKeepBounds = YES;
    //设置本地图片,可以设置网络图片
    self.backView.imageView.image=[UIImage imageNamed:@"back"];
    ///点击事件
    @weakify(self);
    self.backView.ClickDragViewBlock = ^(WMDragView *dragView){
        @strongify(self);
        [self.webView goBack];
    };
    //限定logoView的活动范围
    self.backView.freeRect = CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height-64);
    [self.view addSubview:self.backView];

效果图片

2017年1月3日 11-42-53.png

接下来该解决返回的问题 有这个方法goBack,还有goForward直接用,很简单...

   [self.webView goBack];

这下基本该有的应该都有了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,364评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,579评论 18 139
  • 1、加载网页 WKWebView *webView = [[WKWebView alloc] initWithFr...
    LearningCoding阅读 3,091评论 0 2
  • KTV里又唱起了十年,发现自己找不着调了,唱的乱七八糟,果然没有你,我永远也唱不好这首歌。人生能有几个十年,第一个...
    年年没有小鱼阅读 319评论 0 0
  • 信任背摔 听过教练得讲解觉得危险重重。但是第一个队员上去之后,站在高台上看着他得腿不时的在颤抖,搭好人墙的我们也很...
    靠谱的大树阅读 593评论 0 1