自从iOS8开始,Apple引入了WKWebView欲代替UIWebView。相比而言,WKWebView消耗内从更少,功能也更加强大。让我们来看看WKWebView怎么使用吧!
0.初始化
(1)首先需要引入WebKit库
#import <WebKit/WebKit.h>
// 默认初始化 - (instancetype)initWithFrame:(CGRect)frame; // 根据对webview的相关配置,进行初始化 - (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds]; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]]; [self.view addSubview:webView];
1. WKWebView的代理方法
(1) WKNavigationDelegate
该代理提供的方法,可以用来追踪加载过程(页面开始加载、加载完成、加载失败)、决定是否执行跳转。
// 页面开始加载时调用 - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation; // 当内容开始返回时调用 - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation; // 页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation; // 页面加载失败时调用 - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
// 接收到服务器跳转请求之后调用 - (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation; // 在收到响应后,决定是否跳转 - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler; // 在发送请求之前,决定是否跳转 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
// 创建一个新的WebView - (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
/** * web界面中有弹出警告框时调用 * * @param webView 实现该代理的webview * @param message 警告框中的内容 * @param frame 主窗口 * @param completionHandler 警告框消失调用 */ - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;
// 从web界面中接收到一个脚本时调用 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
2.修改Info.plist
注意从iOS9开始,凡是涉及到网络操作的,都要在Info.plist中加入:
3.加载网页
先要在ViewController 导入WebKit:
import WebKit
var webview = WKWebView() override func viewDidLoad() { super.viewDidLoad() //创建wkwebview let webview = WKWebView(frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height)) //创建网址 let url = NSURL(string: "http://www.jianshu.com/users/040395b7230c/latest_articles") //创建请求 let request = NSURLRequest(URL: url!) //加载请求 webview.loadRequest(request) //添加wkwebview self.view.addSubview(webview) }
4.获取网页标题
为了显示标题,首先给ViewController嵌入一个NavigationController。有了导航栏后,我们要调整一下webview的y轴位置,防止导航栏遮住网页上面部分,在viewDidLoad()里写上:
//获取导航栏高度 let navHeight = self.navigationController?.navigationBar.frame.height //获取状态栏高度 let statusHeight = UIApplication.sharedApplication().statusBarFrame.height webview = WKWebView(frame: CGRectMake(0, statusHeight+navHeight!,self.view.frame.width, self.view.frame.height))
self.webview.navigationDelegate = self
func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) { self.navigationItem.title = self.webview.title }
5.前进和后退
首先我们要在navgationBar上添加前进和后退按钮:
var btnBack = UIBarButtonItem() var btnForward = UIBarButtonItem() func setNavBar() { btnBack = UIBarButtonItem(title: "后退", style: UIBarButtonItemStyle.Plain, target: self, action: "toBack") btnForward = UIBarButtonItem(title: "前进", style: UIBarButtonItemStyle.Plain, target: self, action: "toForward") self.navigationItem.leftBarButtonItem = btnBack self.navigationItem.rightBarButtonItem = btnForward }
func toBack() { if self.webview.canGoBack { self.webview.goBack() } }func toForward() { if self.webview.canGoForward { self.webview.goForward() } }
setNavBar()
6.修改网页配置
现在,一个看似很简单的浏览器完成了,但如果我们把网址换成:
http://csol2.tiancity.com/homepage/article/Class_1166_Time_1.html
即在viewDidLoad()里修改:
let url = NSURL(string: "http://csol2.tiancity.com/homepage/article/Class_1166_Time_1.html")
self.webview.UIDelegate = self
func webView(webView: WKWebView, createWebViewWithConfiguration configuration: WKWebViewConfiguration, forNavigationAction navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? { //如果目标主视图不为空,则允许导航 if !(navigationAction.targetFrame?.mainFrame != nil) { self.webview.loadRequest(navigationAction.request) } return nil }
7.处理js的提示框
现在把网址修改为
http://evt.tiancity.com/csol2/1565/home/index.php
即在viewDidLoad()里修改:
let url = NSURL(string: "http://evt.tiancity.com/csol2/1565/home/index.php")
func webView(webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: () -> Void) { let alert = UIAlertController(title: nil, message: message, preferredStyle: .Alert) alert.addAction(UIAlertAction(title: "Ok", style: .Default, handler: { (_) -> Void in completionHandler() })) self.presentViewController(alert, animated: true, completion: nil) }
8.添加进度条
我们知道UIWebView是无法获取网页加载的进度的,于是也就无法创建进度条了,当然我们可以以某种算法模拟网页加载,自己设置进度条的值。而WKWebView却提供了获取网页加载进度的方法,支持KVO,也就是estimatedProgress。另外还有loading是否正在加载和title页面标题。
我们得创建一个进度条:
var progBar = UIProgressView() //以下代码添加到viewDidLoad() progBar = UIProgressView(frame: CGRectMake(0, 0, self.view.frame.width, 30)) progBar.progress = 0.0 progBar.tintColor = UIColor.redColor() self.webview.addSubview(progBar)
self.webview.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.New, context: nil)
override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>) { if keyPath == "estimatedProgress" { self.progBar.alpha = 1.0 progBar.setProgress(Float(webview.estimatedProgress), animated: true) //进度条的值最大为1.0 if(self.webview.estimatedProgress >= 1.0) { UIView.animateWithDuration(0.3, delay: 0.1, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in self.progBar.alpha = 0.0 }, completion: { (finished:Bool) -> Void in self.progBar.progress = 0 }) } } }
还有一点别忘了,对于KVO模式,有add一定要remove,否则会崩溃。我们可以在视图消失的时候添加remove:
override func viewWillDisappear(animated: Bool) { webview.removeObserver(self, forKeyPath: "estimatedProgress") }
9.最终效果图
10.总结
WKWebView的简单使用就介绍到这里了!大家有兴趣可以为其添加更多功能!如果喜欢本文的话别忘了点击喜欢哦!
后记
既然说WKWebView相比UIWebView消耗的内存更少,那么我们就来实际对比一下,我们让它们加载同一个网站,结果如图
(左为UIWebView,右为WKWebView):
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。