[iOS开发]WKWebView加载JS
2016-10-20 11:05
429 查看
最近项目要用webView加载js文件,挺同事说WKWebView比UIWebView更加好用,于是我今天就试试,百度一发,自己写了个demo。
先看我写的代码,然后再来看WKWebView跟UIWebView的区别:
首先,遵循这两个协议WKNavigationDelegate,WKScriptMessageHandler。
接着,获取JS文本。
NSString * js = @"window.webkit.messageHandlers.observe.postMessage(document.body.innerText);" ;// 注意这里的observe字段是自己写的,不是固定的写法,参考第6行
WKUserScript *wkUserScript = [[WKUserScript alloc]initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];// 这里的 AtDocumentEnd 字段是指网页中的内容加载完毕后再插入 JS 脚本,你也可以选择 AtDocumentStart,在 document element 刚刚创建时就插入脚本,看具体需求
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
[config.userContentController addUserScript:wkUserScript];
[config.userContentController addScriptMessageHandler:self name:@"observe"];
// config.userContentController.addScriptMessageHandler(self, name: "observe") // 对应第一行 JS 脚本中的observe字段
//初始化WKWebView
self.webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:config];
[self.view addSubview:_webView];
self.webView.navigationDelegate = self;
//加载网页
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.jianshu.com"]]];
//_webView.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.jianshu.com")!))
}
然后,实现这两个协议的方法。
NSString *str = message.body ;// 因为我们抓取到的是文本,这里把 message.body 强制转换为 NSString,如果你通过 JS 拿到的是其他信息,按需转换
NSLog(@"%@",str);
}
#pragma mark - 准备加载页面
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
}
#pragma mark - 已开始加载页面,可以在这一步向view中添加一个过渡动画
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
}
#pragma mark - //加载页面失败
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error {
}
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {
}
最后,运行即可。
现在我们可以谈谈这两个控件的区别。
WKWebView 更快(占用内存可能只有 UIWebView 的1/3~1/4),没有缓存,更为细致地拆分了 UIWebViewDelegate 中的方法。
想要了解更多关于 WKWebView 的特性的,可以自行 Google,这里你可以简单地把它当做是轻量级的 UIWebView。
从现在开始,再开发 App 只兼容 iOS 8 和 iOS 9 两个版本就可以了(如果你的产品对覆盖率要求不是很苛刻的话)。WKWebView 是 iOS 8 之后才有的 WebKit 中的内容,所以之前我们要同时兼容 iOS 7 和 iOS 8 的时候,可以推辞说 UIWebView 和 WKWebView 一起做太麻烦了,现在可没有理由拒绝新东西了。
在 WKWebView 中,UIWebViewDelegate 与 UIWebView 被重构成了14类与3个协议,下面给出一些在 UIWebView 中常用的方法的 WKWebView 版本。
//准备加载页面
//已开始加载页面,可以在这一步向view中添加一个过渡动画
//加载页面失败
以上方法分别存在于 UIWebViewDelegate 和 WKNavigationDelegate 中。
如果你之前只是用到了以上列出的 UIWebViewDelegate 中的几个方法,那么只是简单地换一个方法名,让你的 ViewController 继承 WKNavigationDelegate ,继续用就可以了。想要更多内容可以自己用 cmd键+鼠标左击『WKNavigationDelegate』通过 Xcode 查看。
要注意的是
[/code]
先看我写的代码,然后再来看WKWebView跟UIWebView的区别:
首先,遵循这两个协议WKNavigationDelegate,WKScriptMessageHandler。
接着,获取JS文本。
JS交互
- (void)getJS {NSString * js = @"window.webkit.messageHandlers.observe.postMessage(document.body.innerText);" ;// 注意这里的observe字段是自己写的,不是固定的写法,参考第6行
WKUserScript *wkUserScript = [[WKUserScript alloc]initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];// 这里的 AtDocumentEnd 字段是指网页中的内容加载完毕后再插入 JS 脚本,你也可以选择 AtDocumentStart,在 document element 刚刚创建时就插入脚本,看具体需求
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
[config.userContentController addUserScript:wkUserScript];
[config.userContentController addScriptMessageHandler:self name:@"observe"];
// config.userContentController.addScriptMessageHandler(self, name: "observe") // 对应第一行 JS 脚本中的observe字段
//初始化WKWebView
self.webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:config];
[self.view addSubview:_webView];
self.webView.navigationDelegate = self;
//加载网页
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.jianshu.com"]]];
//_webView.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.jianshu.com")!))
}
然后,实现这两个协议的方法。
常用代理方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{NSString *str = message.body ;// 因为我们抓取到的是文本,这里把 message.body 强制转换为 NSString,如果你通过 JS 拿到的是其他信息,按需转换
NSLog(@"%@",str);
}
#pragma mark - 准备加载页面
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
}
#pragma mark - 已开始加载页面,可以在这一步向view中添加一个过渡动画
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
}
#pragma mark - //加载页面失败
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error {
}
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {
}
最后,运行即可。
现在我们可以谈谈这两个控件的区别。
WKWebView 更快(占用内存可能只有 UIWebView 的1/3~1/4),没有缓存,更为细致地拆分了 UIWebViewDelegate 中的方法。
想要了解更多关于 WKWebView 的特性的,可以自行 Google,这里你可以简单地把它当做是轻量级的 UIWebView。
从现在开始,再开发 App 只兼容 iOS 8 和 iOS 9 两个版本就可以了(如果你的产品对覆盖率要求不是很苛刻的话)。WKWebView 是 iOS 8 之后才有的 WebKit 中的内容,所以之前我们要同时兼容 iOS 7 和 iOS 8 的时候,可以推辞说 UIWebView 和 WKWebView 一起做太麻烦了,现在可没有理由拒绝新东西了。
在 WKWebView 中,UIWebViewDelegate 与 UIWebView 被重构成了14类与3个协议,下面给出一些在 UIWebView 中常用的方法的 WKWebView 版本。
//准备加载页面
UIWebViewDelegate - webView:shouldStartLoadWithRequest:navigationType
WKNavigationDelegate - webView:didStartProvisionalNavigation:
//已开始加载页面,可以在这一步向view中添加一个过渡动画
UIWebViewDelegate - webViewDidStartLoad:
WKNavigationDelegate - webView:didCommitNavigation:
//页面已全部加载,可以在这一步把过渡动画去掉 [code]UIWebViewDelegate - webViewDidFinishLoad:
WKNavigationDelegate - webView:didFinishNavigation:
//加载页面失败
UIWebViewDelegate - webView:didFailLoadWithError:
WKNavigationDelegate - webView:didFailNavigation:withError:
WKNavigationDelegate - webView:didFailProvisionalNavigation:withError:
以上方法分别存在于 UIWebViewDelegate 和 WKNavigationDelegate 中。
如果你之前只是用到了以上列出的 UIWebViewDelegate 中的几个方法,那么只是简单地换一个方法名,让你的 ViewController 继承 WKNavigationDelegate ,继续用就可以了。想要更多内容可以自己用 cmd键+鼠标左击『WKNavigationDelegate』通过 Xcode 查看。
要注意的是
webview.delegate = self需要改写为
webview.navigationDelegate = self。
[/code]
相关文章推荐
- IOS开发(7)WKWebView加载本地HTML、CSS、JS文件JS(解决html内访问其他资源路径问题)
- iOS 8 WkWebView 网页的配置和前进,后退,js 交互和进度条的加载
- iOS开发中OC与H5网页交互之OC传值给JS(WKWebView)
- iOS开发之WKWebView怎么加载请求并且传参数
- iOS 8 WkWebView 网页的配置和前进,后退,js 交互和进度条的加载
- [IOS开发]js与WKwebview交互Demo(调取二维码扫描)
- iOS开发,webView加载图片, js交互, 点击图片放大
- iOS开发中的WKWebView与JS的交互
- iOS 加载HTML的相关问题(与JS的互相调用和WKWebView加载本地网页)
- IOS 使用 WKWebView 加载本地的JS和CSS文件出现乱码问题
- iOS WKWebView 混合应用开发时代来临 - 嵌入式 JS 的调试成为催化剂
- iOS开发---WKWebView加载不受信任的https
- IOS 使用 WKWebView 加载本地的JS和CSS文件出现乱码问题
- wkwebview 开发中遇到的问题-加载时机和js的交互
- iOS下JS与OC互相调用(二)--WKWebView 拦截URL
- iOS开发-------基于WKWebView的原生与JavaScript数据交互
- IOS 开发OC 与JS 交互 WebviewJavaScriptBridge 的简单实用(二)
- iOS开发使用sdWebImage实现对tableView的cell加载图片淡入动画
- IOS开发中WebView加载资源路径问题
- iOS 使用WKWebView替换UIWebView(二)——代码实战(包括OC与JS互调)