首页 / IOS / Swift使用WKWebView在iOS应用中调用Web的方法详解

Swift使用WKWebView在iOS应用中调用Web的方法详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Swift使用WKWebView在iOS应用中调用Web的方法详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8037字，纯文字阅读大概需要12分钟。

内容图文

这篇文章主要介绍了Swift使用WKWebView在iOS应用中调用Web的方法详解,使用WKWebView便等于使用和Safari中相同的JavaScript解释器,用来替代过去的UIWebView,需要的朋友可以参考下

自从iOS8开始,Apple引入了WKWebView欲代替UIWebView。相比而言,WKWebView消耗内从更少,功能也更加强大。让我们来看看WKWebView怎么使用吧!

0.初始化
（1）首先需要引入WebKit库

复制代码代码如下:

#import <WebKit/WebKit.h>

（2）初始化方法分为以下两种

复制代码代码如下:

// 默认初始化
- (instancetype)initWithFrame:(CGRect)frame;
// 根据对webview的相关配置，进行初始化
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;

（3）加载网页与HTML代码的方式与UIWebView相同，代码如下：

复制代码代码如下:

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;

（2）WKUIDelegate

复制代码代码如下:

// 创建一个新的WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

剩下三个代理方法全都是与界面弹出提示框相关的，针对于web界面的三种提示框（警告框、确认框、输入框）分别对应三种代理方法。下面只举了警告框的例子。

复制代码代码如下:

/**
* web界面中有弹出警告框时调用
*
* @param webView           实现该代理的webview
* @param message           警告框中的内容
* @param frame             主窗口
* @param completionHandler 警告框消失调用
*/
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;

（3）WKScriptMessageHandler
这个协议中包含一个必须实现的方法，这个方法是提高App与web端交互的关键，它可以直接将接收到的JS脚本转为OC或Swift对象。（当然，在UIWebView也可以通过“曲线救国”的方式与web进行交互，著名的Cordova框架就是这种机制）

复制代码代码如下:

// 从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))

其次,这里要用到WKNavigationDelegate，所以在viewDidLoad()里加上

复制代码代码如下:

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
}

然后我们用到了goBack()和goForward()方法,在前进或后退之前我们要判断一下网页是否能够前进或后退:

复制代码代码如下:

func toBack() {
   if self.webview.canGoBack {
     self.webview.goBack()
    }
}

func toForward() {
if self.webview.canGoForward {
self.webview.goForward()
}
}

最后在viewDidLoad()里加上调用setNavBar()方法:

复制代码代码如下:

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")

我们会发现网页上列表里的文字,包括顶栏上的文字点击了没反应,问题出在哪里呢?这是因为系统阻止了不安全的连接。怎么解决呢？我们就要用到WKUIDelegate中的createWebViewWithConfiguration()这个方法让其允许导航,首先我们要设置自身代理,在viewDidLoad()里加上:

复制代码代码如下:

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")

往下拉,点击‘立即领取‘,本应该出现提示框,却发现什么也没发生。为此,我们要处理一下js的提示框事件。还记得一开始提到的那个方法吧,如下:

复制代码代码如下:

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)

然后给网页添加监听进度,同样在viewDidLoad()里:

复制代码代码如下:

self.webview.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.New, context: nil)

再处理KVO:

复制代码代码如下:

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
        })
      }
    }
}

这里设置进度条的值很重要,因为我们发现,其实进度条的值总比网页加载的实际值慢一些,两者并不同步。如果你不添加动画使进度条加载完成后消失,你会发现进度条还没到最右边中途就不见了。所以我们要用个动画来实现。此外,如果把self.progBar.progress = 0这句语句,即清零的功能放到别的方法中去,比如说放到开始导航的时候来清零,你会发现进度条的动画有问题,会来回转。总之,怎么处理进度条的动画很讲究,我试了好多次发现这个方法相对来说稳定一些。所以我建议大家可以换个进度条的样式,即不依赖于值的显示,如可以转圈圈等等。现在有好多第三方库可以使用,大家可以上cocoapods去查找。

还有一点别忘了,对于KVO模式，有add一定要remove,否则会崩溃。我们可以在视图消失的时候添加remove:

复制代码代码如下:

override func viewWillDisappear(animated: Bool) {
webview.removeObserver(self, forKeyPath: "estimatedProgress")
}

大家可以换些网址试试!

9.最终效果图

技术分享

10.总结
WKWebView的简单使用就介绍到这里了!大家有兴趣可以为其添加更多功能!如果喜欢本文的话别忘了点击喜欢哦!

后记
既然说WKWebView相比UIWebView消耗的内存更少,那么我们就来实际对比一下，我们让它们加载同一个网站，结果如图
(左为UIWebView,右为WKWebView):

技术分享

原文：http://www.cnblogs.com/liyingnan/p/5667264.html

内容总结

以上是互联网集市为您收集整理的Swift使用WKWebView在iOS应用中调用Web的方法详解全部内容，希望文章能够帮你解决Swift使用WKWebView在iOS应用中调用Web的方法详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1211303.html

来源：【匿名】

【上一篇】IOS中的正则表达式:NSRegularExpression 【下一篇】php如何实现ios推送

更多 ►

【Swift使用WKWebView在iOS应用中调用Web的方法详解】教程文章相关的互联网学习教程文章

Swift使用WKWebView在iOS应用中调用Web的方法详解

这篇文章主要介绍了Swift使用WKWebView在iOS应用中调用Web的方法详解,使用WKWebView便等于使用和Safari中相同的JavaScript解释器,用来替代过去的UIWebView,需要的朋友可以参考下自从iOS8开始,Apple引入了WKWebView欲代替UIWebView。相比而言,WKWebView消耗内从更少,功能也更加强大。让我们来看看WKWebView怎么使用吧!0.初始化（1）首先需要引入WebKit库复制代码代码如下:#import <WebKit/WebKit.h>（2）初始化方法分为以下两种复制...

iOS获取webview高度【代码】

1int webHeight = [[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.scrollHeight"] intValue]; 原文：http://www.cnblogs.com/sun-wsh/p/6065055.html

转载一篇关于iOS UIWebview 和javascript关联的文章

作者写的很明白，请参看原地址 http://blog.163.com/m_note/blog/static/208197045201293015844274/ 这里涉及的就是UIWebview的2个最主要的方法，stringByEvaluatingJavaScriptFromString: 和- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType 。第一个方法的主要功能是注入和执行javascript，具体是注入还是执行，要看你参照中的string的格式。第二个方法的主要是根据请...

iOS开发Safari调试WebView页面【图】

App混合开发现已是常态，不过作为app端开发人员，对H5页面的使用，可不能简单的局限于使用，一些简单的调试方法还是有必要了解的。关于如何在使用webview过程中，如何对web内对内容进行调试，这里会简单讲一下步骤。一、真机或Simulator 打开"设置"->"Safari"->"高级"->"Web检查器" 二、打开电脑上 Safari ->“偏好设置” -> “高级” -> “在菜单栏中显示开发选项”下面我会使用模拟器进行测试。三、这时，我们不运行app，...

iOS开发webView的使用二【代码】

#import"ViewController.h"@interface ViewController ()<UIWebViewDelegate> @property (weak, nonatomic) IBOutlet UIWebView *webView; @property (weak, nonatomic) IBOutlet UIBarButtonItem *goBack; @property (weak, nonatomic) IBOutlet UIBarButtonItem *goForward;@end@implementation ViewController#pragma mark ---------------------- #pragma mark Life Cycle - (void)viewDidLoad {[super viewDidLoad];NSURL *ur...

IOS客户端UIwebview下web页面闪屏问题

基于ios客户端uiwebview下的web页面，在其内容高度大于视窗高度时，如果点击超过视窗下文档的底部按钮，收缩内容高度，会发生闪屏问题。外因是由文档的高度大于视窗的高度所致，本质原因未知。解决办法：　　为最外层的元素设置height:100%(要保证100%的高度等于视窗高度)，overflow:scroll,如果想避免出现滚动条的话，还可以在最外层元素加上伪类::-webkit-scrollbar{display:none}，即可完美解决闪屏问题。原文：http://www.cnb...

IOS UIWebView使用开发

NSURL *loadingUrl = [NSURL URLWithString:@"www.baidu.com"];NSURLRequest *request = [NSURLRequest requestWithURL:loadingUrl];UIWebView string原文：http://roderickkennedy.blog.51cto.com/6758427/1553087

iOS: 计算 UIWebView 的内容高度【代码】【图】

- (void)webViewDidFinishLoad:(UIWebView *)wb { //方法1 CGFloat documentWidth = [[wb stringByEvaluatingJavaScriptFromString:@"document.getElementById(‘content‘).offsetWidth"] floatValue]; CGFloat documentHeight = [[wb stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"content\").offsetHeight;"] floatValue]; NSLog(@"documentSize = {%f, %f}", documentWidth, documentHeight);//方法2 C...

vue中的方法如何暴露给webview，使安卓和iOS可以调用【代码】【图】

新建一个外部公共的js文件app.js，定义一个对象并输出，如下：var hybrid = {} window.Hybrid = hybrid if (window.Vue) { // 自动绑定 window.Vue.use(hybrid) }export { hybrid }在需要的文件中引入app.js，将需要暴露的方法赋给hybrid对象，如下：在安卓或者iOS上可调用hybrid.clickMusic来执行函数原文：http://www.cnblogs.com/xunhuang/p/7514115.html

iOS 获取UIWebView上面的按钮点击事件

UIWebView的一些用法总结的网址 http://blog.csdn.net/zhaoweixing1989/article/details/13021513 在网上看到很多文章都说iOS的UIWebView比较耗内存，在我的项目中，最开始我也是用UIWebView来加载网页的。刚开始加载的是自己拼接成的Html，后来在Html中加入一个按钮，点击之后用当前的UIWebView去加载网络上的网页。程序跑起来发现非常耗内存，加载几个网上的网页之后就爆内存警告了，不处理的话很容易被评估拒掉app。后来就改成...

ios开发 uiwebview加载网页时阻止禁止取消图片下载【代码】

http://www.icab.de/blog/2009/08/18/url-filtering-with-uiwebview-on-the-iphone/ - (NSCachedURLResponse*)cachedResponseForRequest:(NSURLRequest*)request {NSURL *url = [request URL];BOOL blockURL = [url.absoluteString hasSuffix:@"jpg"] || [url.absoluteString hasSuffix:@"jpeg"] || [url.absoluteString hasSuffix:@"png"] || [url.absoluteString hasSuffix:@"gif"] || [url.absoluteString hasSuffix:@"ico"] ||...

ios-UIWebView中js和oc代码的互调【代码】

webview是ios中显示远程数据的网页控件，webview能显示的内容很多，MP4、文本、pdf等等；关于js和oc代码的互相调用1：oc中调用js代码;>>oc中调用js代码很简单，一个方法：stringByEvaluatingJavaScriptFromString：@“”；>>要执行的js代码方法到字符串中就可以了；2：js中执行oc的某段代码；>>js中执行oc的代码要通过一个桥梁:　　者桥梁就是webview的一个代理方法：(BOOL)webView:(UIWebView *)webView shouldStartLoadWithReque...

iOS UIWebView 访问https绕过证书验证的方法

@implementation NSURLRequest (NSURLRequestWithIgnoreSSL)+ (BOOL)allowsAnyHTTPSCertificateForHost:(NSString *)host{ return YES;}@end原文：http://www.cnblogs.com/feng9exe/p/8046077.html

iOS开篇——UI之UIWebView【代码】

webView使用 loadRequest: 方法请求数据的加载 1 - (void)createWebView{2//创建全屏大小的webView 3 UIWebView * view = [[UIWebView alloc]initWithFrame:self.view.bounds];4 view.tag = 1;5//创建一个网址对象 6 NSURL * url = [NSURL URLWithString:@"http://www.baidu.com"];7//网络请求 8 NSURLRequest * request = [[NSURLRequest alloc]initWithURL:url];910//用网络请求数据加载webView11 [view load...

IOS webview部分选中链接中的文字【图】

这是我本周遇到遇到的最奇葩的问题，没有之一。先放一张成功之后的效果图：一个图文混排的列表页，在需要选择部分文字进行copy的时候，IOS个二货每次都是直接选中了整个列表项，无论怎么操作它的选框都没有办法做到部分选中。仔细思考并试验之后，找到了两个解决方案：一、把需要选中的文字放进input[text]，然后用oninput屏蔽掉input的输入；二、分析html/css研究下ios为啥总是傻傻分不清楚，只能整块整块的选中；方案一，完美实现...

首页 / IOS / Swift使用WKWebView在iOS应用中调用Web的方法详解

Swift使用WKWebView在iOS应用中调用Web的方法详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【Swift使用WKWebView在iOS应用中调用Web的方法详解】教程文章相关的互联网学习教程文章

WEBVIEW - 相关标签

调用 - 相关标签

方法 - 相关标签

IOS - 最新教程

IOS - 最热教程