美文网首页ios实用开发技巧iOS Developer
分享一个网页浏览器(Swift&Objective-C版

分享一个网页浏览器(Swift&Objective-C版

作者: ZYiDa | 来源:发表于2017-08-28 13:34 被阅读166次
    老规矩,先看效果图。
    QQ20170828-113431-HD-iloveimg-compressed.gif
    关于怎么获取WKWebView页面title和加载进度值,大家可以参考我之前的文章

    接下来,说一下怎么实现点击返回按钮来返回上一Controller或者网页记录,以及关闭按钮的隐藏和出现。

    第一步,创建观察者,监听WKWebViewcanGoBack值变化,如下
    [self.wkWebview addObserver:self forKeyPath:@"canGoBack" options:NSKeyValueObservingOptionNew context:NULL];
    
    第二步,实现kvo的监听方法,如下,
    #pragma mark KVO的监听代理
    - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    
        //是否可以返回
        if ([keyPath isEqualToString:@"canGoBack"])
        {
            if (object == self.wkWebview)
            {
            }
        }
        else
        {
            [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
        }
    }
    
    
    第三步,创建返回按钮和关闭按钮,实现对应的方法,判断返回按钮执行的是pop操作,还是返回上一个网页记录,如下
    #pragma mark 设置BarButtonItem
    - (void)setBarButtonItem
    {
    
        //设置距离左边屏幕的宽度距离
        self.leftBarButton = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"back_item"] style:UIBarButtonItemStylePlain target:self action:@selector(selectedToBack)];
        self.negativeSpacer = [[UIBarButtonItem alloc]   initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace   target:nil action:nil];
        self.negativeSpacer.width = -5;
    
        //设置关闭按钮,以及关闭按钮和返回按钮之间的距离
        self.leftBarButtonSecond = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"close_item"] style:UIBarButtonItemStylePlain target:self action:@selector(selectedToClose)];
        self.leftBarButtonSecond.imageInsets = UIEdgeInsetsMake(0, -20, 0, 20);
        self.navigationItem.leftBarButtonItems = @[self.negativeSpacer,self.leftBarButton];
    
    
        //设置刷新按妞
        UIBarButtonItem *reloadItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"reload_item"] style:UIBarButtonItemStylePlain target:self action:@selector(selectedToReloadData)];
        self.navigationItem.rightBarButtonItem = reloadItem;
    
    }
    #pragma mark 关闭并上一界面
    - (void)selectedToClose
    {
        [self.navigationController popViewControllerAnimated:YES];
    }
    
    #pragma mark 返回上一个网页还是上一个Controller
    - (void)selectedToBack
    {
        if (self.wkWebview.canGoBack == 1)
        {
            [self.wkWebview goBack];
        }
        else
        {
            [self.navigationController popViewControllerAnimated:YES];
        }
    }
    
    #pragma mark reload
    - (void)selectedToReloadData
    {
        [self.wkWebview reload];
    }
    
    第四步,在KVO监听方法中来判断是否显示关闭按钮,如下
    if ([keyPath isEqualToString:@"canGoBack"])
        {
            if (object == self.wkWebview)
            {
                if (self.wkWebview.canGoBack == 1)
                {
                    self.navigationItem.leftBarButtonItems = @[self.negativeSpacer,self.leftBarButton,self.leftBarButtonSecond];
                }
                else
                {
                    self.navigationItem.leftBarButtonItems = @[self.negativeSpacer,self.leftBarButton];
                }
            }
            else
            {
                [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
            }
        }
    
    第五步,观察者的添加和移除是成对出现的,所以别忘了移除观察者。
    #pragma mark 移除观察者
    - (void)dealloc
    {
        [self.wkWebview removeObserver:self forKeyPath:@"estimatedProgress"];
        [self.wkWebview removeObserver:self forKeyPath:@"canGoBack"];
        [self.wkWebview removeObserver:self forKeyPath:@"title"];
    }
    
    说明:

    1.添加
    self.negativeSpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
    self.negativeSpacer.width = -5;
    的作用就是为了调整关闭按钮与返回屏幕之间的距离
    2.只有当关闭按钮是Image类型,才能通过self.leftBarButtonSecond.imageInsets = UIEdgeInsetsMake(0, -20, 0, 20);来调整返回按钮与关闭按钮之间的距离。如果是title类型的,则可能会没有作用。

    完整的demo,大家可以去我的Github下载Objective-C版本Swift版本
    代码肯定会有不足的地方,还希望大家多多指教。

    相关文章

      网友评论

        本文标题:分享一个网页浏览器(Swift&Objective-C版

        本文链接:https://www.haomeiwen.com/subject/duzwdxtx.html