美文网首页
iOS 中JS和OC互调----UIWebView(进阶)

iOS 中JS和OC互调----UIWebView(进阶)

作者: F麦子 | 来源:发表于2017-09-21 01:56 被阅读32次

    在上一篇博文我们已经讲了UIWebView的基础知识,这篇博文主要讲的知识点包含如下:

    UIWebView设置

    清空浏览器的cookies;

    清除UIWebView的缓存;

    网页刷新;

    网页上一页和下一页;

    网页加载的进度条,效果如qq和微信的网页加载进度条。

    1 准备工作

    1.1 搭建项目

    前期的项目搭建和上一篇博文一样,只是在UINavigationController添加三个按钮。运行后的界面如图所示:

    在图中有三个按钮,从左到右分别是刷新、后退和前进。

    这里我使用的控制器为AdvancedVC。

    #import"AdvancedVC.h"

    @interfaceAdvancedVC()

    @property(weak,nonatomic)IBOutletUIWebView*webView;///< UIWebView

    @end

    @implementationAdvancedVC

    - (void)viewDidLoad {

              [superviewDidLoad];

              // Do any additional setup after loading the view.

    }

    @end

    1.2 显示网页

    我们使用大家都熟悉的百度做测试,加载网页“https://www.baidu.com”。

    - (void)viewDidLoad {  

                   [superviewDidLoad];

                 // Do any additional setup after loading the view.

                  NSURL*url = [NSURLURLWithString:@"https://www.baidu.com"];

                   NSURLRequest*urlRequest = [NSURLRequestrequestWithURL:url];

                    // url的位置               

                 [self.webViewloadRequest:urlRequest];

                   // 加载页面

    }

    运行项目后,大家会发现一个错误。错误信息为

    2.2 页面滚动弹跳

    上面说的,你可以滑动到顶部看到背景色,这里有一个弹跳效果。也就是你看见背景色,松开手指看到的效果。这里你可以禁用这种效果。

    self.webView.scrollView.bounces= NO;

    2.3 缩放

    默认情况下UIWebView加载HTML页面后,会以页面的原始大小进行显示,亦即如果页面的大小超出UIWebView视口大小,UIWebView会出现滚动效果,而且用户只能通过滚动页面来查看不同区域的内容,不能使用手指的捏合手势来放大或缩小页面。通过设置

    self.webView.scalesPageToFit=YES;

    UIWebView可以缩放HTML页面来适配其视口大小,从而达到整屏显示内容的效果,并且用户可以用捏合动作来放大或缩小页面来查看内容。

    3 清空cookies

    清空cookies使用到了NSHTTPCookieStorage类,这个类主要用于管理网络中的cookies。

    在viewDidLoad方法中添加如下代码,这里我们清空了所有cookies。

    4 清除缓存

    清除UIWebView的缓存使用了NSURLCache对象,在这里我们使用removeAllCachedResponses清楚所有缓存。

    5 网页刷新

    在UIWebView有下列属性和方法。

    、@property (nonatomic, readonly, getter=isLoading) BOOL loading、:是否正在刷新界面

    - (void)reload:刷新

    - (void)stopLoading:停止刷新

    在AdvancedVC添加如下代码

    6 网页上一页和下一页

    在UIWebView有下列方法:

    @property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack:能否去上一页;

    @property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward:能否去下一页;

    - (void)goBack:去上一页;

    - (void)goForward:去下一页。

    在AdvancedVC添加如下代码

    7 进度条

    7.1 QQ进度条分析

    打开qq的网页浏览,发现在UINavigationController有一个很炫的进度条,初步分析使用的是UIProgressView控件,这里我们也使用这种控件,只要实现进度条的动画效果即可。如果你想实现更炫的效果,请自行研究UIProgressView。

    7.2 项目改造

    为了实现进度条,需要在界面中加一个UIProgressView控件。

    在storyboard拉一个UIProgressView放在view上,并设置相关约束。搭建好后效果如图

    然后将控件指向AdvancedVC,并实现UIVWebView的代理,完成后代码如下。

    7.3 进度条实现

    运行项目后,我们在浏览器随意操作。发现,有的页面输出信息多,有的页面输出信息少。

    对比发现有的页面是请求多个url然后展示,而有的页面只请求一个url页面。

    这就给我们实现进度条的机会,我们可以制作一个简单的进度条。由于webViewDidStartLoad和webViewDidFinishLoad是一一对应的,而且一个页面是并发的请求webViewDidStartLoad,然后再一个一个回调webViewDidFinishLoad。

    通过这里你就发现了,只要完成的请求除以发出的请求就是进度条的百分比。

    添加两个属性_startLoadingCount和_finishLoadingCount分别记录需加载和完成的请求,然后相除则完美实现进度条。

    这里我只展示核心代码:

    运行项目,进度条完美运行,是不是感觉很爽,你也会制作很炫的进度条了。但是这里我们制作的进度条是伪进度条,比较粗糙,虽然用户发现不了,但是我们自己还是知道。在UIWebView高级篇我会为大家介绍精度更高的进度条。

    其他

    参考资料

    UIWebView Class Reference

    版权所有

    CSDN:http://blog.csdn.net/y550918116j

    GitHub:https://github.com/937447974/Blog

    相关文章

      网友评论

          本文标题:iOS 中JS和OC互调----UIWebView(进阶)

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