iOS H5容器的一些探究(一):UIWebView和WKWebView的比较和选择
2016-09-18 14:11
579 查看
一、Native开发中为什么需要H5容器
Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了一套标准化实现和优化方案。但是他们存在一些硬伤,比如App的发版周期偏长、有时无法跟上产品的更新节奏;灵活性差,如果有较大的方案变更,需要发版才能解决;如果存在bug,在当前版本修复的难度比较大(iOS的JSPatch方案和Android的Dex修复方案);需要根据不同的平台写不同的代码,iOS主要为object_c和swift,android为Java。
而作为H5为主要开发模式的Web App的灵活性就比较强,他利用操作系统中的h5容器作为一个承载,对外提供一个url链接,而该url链接对应的内容可以实时在服务端进行修改,灵活行很强,避免了Native发版周期带来的时间成本。但是h5虽然灵活,但是他也有自己的硬伤。每次都需要下载完整的UI数据(html,css,js),弱网用户体验较差,流量消耗较大;无法调用系统文件系统,硬件资源等等;
Native App和Web App都有他们的优势和劣势。我们也不能一棍子拍死说谁好谁劣。通常的经验是:对于一些比较稳当的业务,对用户体验要求较高的,我们可以选择Native开发。而对于一些业务变更比较快、处在不断试水的过程,而且不涉及调用文件系统和硬件调用的业务我们可以选择h5开发。所以说,在一款app中我们需要同时支持Native代码和h5代码。这也是我们标题所说的Native开发中需要H5容器的必要性。
iOS存在的h5容器主要包括UIWebView和WKWebView,下面我们就分别来说说他们的用法和优劣。
二、UIWebView的基本用法
2.1、加载网页
UIWebView
*webView
= [[UIWebView
alloc]
initWithFrame:self.view.bounds];
webView.delegate
= self;
[self.view
addSubview:webView];
//网络地址
NSURL
*url
= [[NSURL
alloc]
initWithString:@"http://www.taobao.com"];
NSURLRequest
*request
= [NSURLRequest
requestWithURL:url];
[webView
loadRequest:request];
2.2、UIWebViewDelegate几个常用的代理方法
//进行加载前的预判断,如果返回YES,则会进入后续流程(StartLoad,FinishLoad)。如果返回NO,这不会进入后续流程。
-
(BOOL)webView:(UIWebView
*)webView
shouldStartLoadWithRequest:(NSURLRequest
*)request
navigationType:(UIWebViewNavigationType)navigationType;
//开始加载网页
-
(void)webViewDidStartLoad:(UIWebView
*)webView;
//加载完成
-
(void)webViewDidFinishLoad:(UIWebView
*)webView;
//加载失败
-
(void)webView:(UIWebView
*)webView
didFailLoadWithError:(nullable
NSError
*)error;
2.3、Native调用JS中的方法
比如我们在加载的HTML文件中有如下js代码:
<script
type="text/javascript">
function
hello(){
alert("你好!");
}
function
helloWithName(name){
alert(name
+ ",你好!");
}
</script>
我们可以调用- (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script;函数进行js调用。
[webView
stringByEvaluatingJavaScriptFromString:@"hello()"];
[webView
stringByEvaluatingJavaScriptFromString:@"helloWithName('jack')"];
js代码不一定要在js文件中预留,也可以在代码中通过字符串的形式进行调用,比如下面:
//自定义js函数
NSString
*jsString
= @"function
sayHello(){ \
alert('jack11')
\
}
\
sayHello()";
[_webView
stringByEvaluatingJavaScriptFromString:jsString];
NSString
*jsString
= @"
var p = document.createElement('p'); \
p.innerText
= 'New Line'; \
document.body.appendChild(p); \
";
[_webView
stringByEvaluatingJavaScriptFromString:jsString];
2.4、JS中调用Naitve的方法
具体让js通知native进行方法调用,我们可以让js产生一个特殊的请求。可以让Native代码可以拦截到,而且不然用户察觉。业界一般的实现方案是在网页中加载一个隐藏的iframe来实现该功能。通过将iframe的src指定为一个特殊的URL,实现在- (BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType;方案中进行拦截处理。对应的js调用代码如下:
function
loadURL(url)
{
var
iFrame;
iFrame
= document.createElement("iframe");
iFrame.setAttribute("src",
url);
iFrame.setAttribute("style",
"display:none;");
iFrame.setAttribute("height",
"0px");
iFrame.setAttribute("width",
"0px");
iFrame.setAttribute("frameborder",
"0");
document.body.appendChild(iFrame);
//
发起请求后这个iFrame就没用了,所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame
= null;
}
比如我们在js代码中,调用一下两个js方法:
function
iOS_alert()
{//调用自定义对话框
loadURL("alert://abc");
}
function
call()
{// js中进行拨打电话处理
loadURL("tel://17715022071");
}
当你触发以上方法的时候,就会进入webview的代理方法中进行拦截。
-
(BOOL)webView:(UIWebView
*)webView
shouldStartLoadWithRequest:(NSURLRequest
*)request
navigationType:(UIWebViewNavigationType)navigationType{
NSURL
* url
= [request
URL];
if
([[url
scheme]
isEqualToString:@"alert"])
{//拦截请求,弹出自定义对话框
UIAlertView
* alertView
= [[UIAlertView
alloc]
initWithTitle:@"test"
message:[url
host]
delegate:nil
cancelButtonTitle:@"OK"
otherButtonTitles:nil];
[alertView
show];
return
NO;
}else
if([[url
scheme]
isEqualToString:@"tel"]){//拦截拨打电话请求
BOOL
result
= [[UIApplication
sharedApplication]
openURL:url];
if
(!result)
{
NSLog(@"您的设备不支持打电话");
}
else
{
NSLog(@"电话打了");
}
return
NO;
}
return
YES;
}
这样我们就可以让js进行native的调用。
三、WKWebView的基本用法
3.1、加载网页
WKWebView
*webView
= [[WKWebView
alloc]
initWithFrame:[UIScreen
mainScreen].bounds];
NSURL
*url
= [NSURL
URLWithString:@"http://www.taobao.com"];
NSURLRequest
*request
= [NSURLRequest
requestWithURL:url];
[webView
loadRequest:request];
[self.view
addSubview:webView];
3.2、几个常用的代理方法
/**
* 根据webView、navigationAction相关信息决定这次跳转是否可以继续进行,这些信息包含HTTP发送请求,如头部包含User-Agent,Accept,refer
* 在发送请求之前,决定是否跳转的代理
* @param webView
* @param navigationAction
* @param decisionHandler
*/
-
(void)webView:(WKWebView
*)webView
decidePolicyForNavigationAction:(WKNavigationAction
*)navigationAction
decisionHandler:(void
(^)(WKNavigationActionPolicy))decisionHandler{
decisionHandler(WKNavigationActionPolicyAllow);
}
/**
* 这个代理方法表示当客户端收到服务器的响应头,根据response相关信息,可以决定这次跳转是否可以继续进行。
* 在收到响应后,决定是否跳转的代理
* @param webView
* @param navigationResponse
* @param decisionHandler
*/
-
(void)webView:(WKWebView
*)webView
decidePolicyForNavigationResponse:(WKNavigationResponse
*)navigationResponse
decisionHandler:(void
(^)(WKNavigationResponsePolicy))decisionHandler{
decisionHandler(WKNavigationResponsePolicyAllow);
}
/**
* 准备加载页面。等同于UIWebViewDelegate: - webView:shouldStartLoadWithRequest:navigationType
*
* @param webView
* @param navigation
*/
-
(void)webView:(WKWebView
*)webView
didStartProvisionalNavigation:(null_unspecified
WKNavigation
*)navigation{
}
/**
* 这个代理是服务器redirect时调用
* 接收到服务器跳转请求的代理
* @param webView
* @param navigation
*/
-
(void)webView:(WKWebView
*)webView
didReceiveServerRedirectForProvisionalNavigation:(null_unspecified
WKNavigation
*)navigation{
}
-
(void)webView:(WKWebView
*)webView
didFailProvisionalNavigation:(null_unspecified
WKNavigation
*)navigation
withError:(NSError
*)error{
}
/**
* 内容开始加载. 等同于UIWebViewDelegate: - webViewDidStartLoad:
*
* @param webView
* @param navigation
*/
-
(void)webView:(WKWebView
*)webView
didCommitNavigation:(null_unspecified
WKNavigation
*)navigation{
}
/**
* 页面加载完成。 等同于UIWebViewDelegate: - webViewDidFinishLoad:
*
* @param webView
* @param navigation
*/
-
(void)webView:(WKWebView
*)webView
didFinishNavigation:(null_unspecified
WKNavigation
*)navigation{
}
/**
* 页面加载失败。 等同于UIWebViewDelegate: - webView:didFailLoadWithError:
*
* @param webView
* @param navigation
* @param error
*/
-
(void)webView:(WKWebView
*)webView
didFailNavigation:(null_unspecified
WKNavigation
*)navigation
withError:(NSError
*)error{
}
-
(void)webViewWebContentProcessDidTerminate:(WKWebView
*)webView
NS_AVAILABLE(10_11,
9_0){
}
/*
我们看看WKUIDelegate的几个代理方法,虽然不是必须实现的,但是如果我们的页面中有调用了js的alert、confirm、prompt方法,我们应该实现下面这几个代理方法,然后在原来这里调用native的弹出窗,因为使用WKWebView后,HTML中的alert、confirm、prompt方法调用是不会再弹出窗口了,只是转化成ios的native回调代理方法
*/
#pragma
mark - WKUIDelegate
-
(void)webView:(WKWebView
*)webView
runJavaScriptAlertPanelWithMessage:(NSString
*)message
initiatedByFrame:(WKFrameInfo
*)frame
completionHandler:(void
(^)(void))completionHandler{
UIAlertController
*alertView
= [UIAlertController
alertControllerWithTitle:@"h5Container"
message:message
preferredStyle:UIAlertControllerStyleAlert];
// [alertView addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
// textField.textColor = [UIColor redColor];
// }];
[alertView
addAction:[UIAlertAction
actionWithTitle:@"我很确定"
style:UIAlertActionStyleDefault
handler:^(UIAlertAction
* _Nonnull
action)
{
completionHandler();
}]];
[self
presentViewController:alertView
animated:YES
completion:nil];
}
显然WKWebView的代理方法提供了比UIWebView颗粒度更细的方法。让开发者可以进行更加细致的配置和处理。
3.3 、Native调用JS中的方法
WKWebView提供的调用js代码的函数是:
-
(void)evaluateJavaScript:(NSString
*)javaScriptString
completionHandler:(void
(^
__nullable)(__nullable
id,
NSError *
__nullable
error))completionHandler;
比如我们在加载的HTML文件中有如下js代码:
<script
type="text/javascript">
function
hello(){
alert("你好!");
}
function
helloWithName(name){
alert(name
+ ",你好!");
}
</script>
我们可以调用如下代码进行js的调用:
[_wkView
evaluateJavaScript:@"hello()"
completionHandler:^(id
item,
NSError
* error)
{
}];
[_wkView
evaluateJavaScript:@"helloWithName('jack')"
completionHandler:^(id
item,
NSError
*error)
{
}];
同UIWebView一样,我们也可以通过字符串的形式进行js调用。
NSString
*jsString
= @"function sayHello(){
\
alert('jack11')
\
}
\
sayHello()";
[_wkView
evaluateJavaScript:jsString
completionHandler:^(id
item,
NSError
*error)
{
}];
jsString
= @"
var p = document.createElement('p'); \
p.innerText
= 'New Line'; \
document.body.appendChild(p); \
";
[_wkView
evaluateJavaScript:jsString
completionHandler:^(id
item,
NSError
*error)
{
}];
3.4、JS中调用Naitve的方法
除了和UIWebView加载一个隐藏的ifame之外,WKWebView自身还提供了一套js调用native的规范。
我们可以在初始化WKWebView的时候,给他设置一个config参数。
//高端配置
//创建配置
WKWebViewConfiguration
*config
= [[WKWebViewConfiguration
alloc]
init];
//创建UserContentController(提供javaScript向webView发送消息的方法)
WKUserContentController
*userContent
= [[WKUserContentController
alloc]
init];
//添加消息处理,注意:self指代的是需要遵守WKScriptMessageHandler协议,结束时需要移除
[userContent
addScriptMessageHandler:self
name:@"NativeMethod"];
//将UserContentController设置到配置文件中
config.userContentController
= userContent;
//高端的自定义配置创建WKWebView
_wkView
= [[YXWKView
alloc]
initWithFrame:self.view.bounds
configuration:config];
NSURL
*url
= [NSURL
URLWithString:@"http://localhost:8080/myDiary/index.html"];
NSURLRequest
*request
= [NSURLRequest
requestWithURL:url];
[_wkView
loadRequest:request];
_wkView.UIDelegate
= self;
_wkView.navigationDelegate
= self;
[self.view
addSubview:_wkView];
我们在js可以通过NativeMethod这个Handler让js代码调用native。
比如在js代码中,我新增了一个方法
<script
type="text/javascript">
function
invokeNativeMethod(){
window.webkit.messageHandlers.NativeMethod.postMessage("我要调用native的方法");
}
</script>
触发以上方法的时候,会在native以下方法中进行拦截处理。
#pragma
mark - WKScriptMessageHandler
-
(void)userContentController:(WKUserContentController
*)userContentController
didReceiveScriptMessage:(WKScriptMessage
*)message{
//这里就是使用高端配置,js调用native的处理地方。我们可以根据name和body,进行桥协议的处理。
NSString
*messageName
= message.name;
if
([@"NativeMethod"
isEqualToString:messageName])
{
id
messageBody
= message.body;
NSLog(@"%@",messageBody);
}
}
四、UIWebView和WKWebView的比较和选择
WKWebView是苹果在WWDC2014发布会中发布IOS8的时候公布WebKit时候使用的新型的H5容器。它与UIWebView相比较,拥有更快的加载速度和性能,更低的内存占用。将UIWebViewDelegate和UIWebView重构成了14个类,3个协议,可以让开发者进行更加细致的配置。
但是他有一个最致命的缺陷,就是WKWebView的请求不能被NSURLProtocol截获。而我们团队开发的app中对于H5容器最佳的优化点主要就在于使用NSURLProtocol技术对于H5进行离线包的处理和H5的图片和Native的图片公用一套缓存的技术。因为该问题的存在,目前我们团队还没有使用WKWebView代替UIWebVIew。
五、联系方式
新浪微博:http://weibo.com/5612984599/info
github:https://github.com/yixiangboy
简书首页:http://www.jianshu.com/users/c3c893a27097/timeline
欢迎加好友、一起交流。
Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了一套标准化实现和优化方案。但是他们存在一些硬伤,比如App的发版周期偏长、有时无法跟上产品的更新节奏;灵活性差,如果有较大的方案变更,需要发版才能解决;如果存在bug,在当前版本修复的难度比较大(iOS的JSPatch方案和Android的Dex修复方案);需要根据不同的平台写不同的代码,iOS主要为object_c和swift,android为Java。
而作为H5为主要开发模式的Web App的灵活性就比较强,他利用操作系统中的h5容器作为一个承载,对外提供一个url链接,而该url链接对应的内容可以实时在服务端进行修改,灵活行很强,避免了Native发版周期带来的时间成本。但是h5虽然灵活,但是他也有自己的硬伤。每次都需要下载完整的UI数据(html,css,js),弱网用户体验较差,流量消耗较大;无法调用系统文件系统,硬件资源等等;
Native App和Web App都有他们的优势和劣势。我们也不能一棍子拍死说谁好谁劣。通常的经验是:对于一些比较稳当的业务,对用户体验要求较高的,我们可以选择Native开发。而对于一些业务变更比较快、处在不断试水的过程,而且不涉及调用文件系统和硬件调用的业务我们可以选择h5开发。所以说,在一款app中我们需要同时支持Native代码和h5代码。这也是我们标题所说的Native开发中需要H5容器的必要性。
iOS存在的h5容器主要包括UIWebView和WKWebView,下面我们就分别来说说他们的用法和优劣。
二、UIWebView的基本用法
2.1、加载网页
UIWebView
*webView
= [[UIWebView
alloc]
initWithFrame:self.view.bounds];
webView.delegate
= self;
[self.view
addSubview:webView];
//网络地址
NSURL
*url
= [[NSURL
alloc]
initWithString:@"http://www.taobao.com"];
NSURLRequest
*request
= [NSURLRequest
requestWithURL:url];
[webView
loadRequest:request];
2.2、UIWebViewDelegate几个常用的代理方法
//进行加载前的预判断,如果返回YES,则会进入后续流程(StartLoad,FinishLoad)。如果返回NO,这不会进入后续流程。
-
(BOOL)webView:(UIWebView
*)webView
shouldStartLoadWithRequest:(NSURLRequest
*)request
navigationType:(UIWebViewNavigationType)navigationType;
//开始加载网页
-
(void)webViewDidStartLoad:(UIWebView
*)webView;
//加载完成
-
(void)webViewDidFinishLoad:(UIWebView
*)webView;
//加载失败
-
(void)webView:(UIWebView
*)webView
didFailLoadWithError:(nullable
NSError
*)error;
2.3、Native调用JS中的方法
比如我们在加载的HTML文件中有如下js代码:
<script
type="text/javascript">
function
hello(){
alert("你好!");
}
function
helloWithName(name){
alert(name
+ ",你好!");
}
</script>
我们可以调用- (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script;函数进行js调用。
[webView
stringByEvaluatingJavaScriptFromString:@"hello()"];
[webView
stringByEvaluatingJavaScriptFromString:@"helloWithName('jack')"];
js代码不一定要在js文件中预留,也可以在代码中通过字符串的形式进行调用,比如下面:
//自定义js函数
NSString
*jsString
= @"function
sayHello(){ \
alert('jack11')
\
}
\
sayHello()";
[_webView
stringByEvaluatingJavaScriptFromString:jsString];
NSString
*jsString
= @"
var p = document.createElement('p'); \
p.innerText
= 'New Line'; \
document.body.appendChild(p); \
";
[_webView
stringByEvaluatingJavaScriptFromString:jsString];
2.4、JS中调用Naitve的方法
具体让js通知native进行方法调用,我们可以让js产生一个特殊的请求。可以让Native代码可以拦截到,而且不然用户察觉。业界一般的实现方案是在网页中加载一个隐藏的iframe来实现该功能。通过将iframe的src指定为一个特殊的URL,实现在- (BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType;方案中进行拦截处理。对应的js调用代码如下:
function
loadURL(url)
{
var
iFrame;
iFrame
= document.createElement("iframe");
iFrame.setAttribute("src",
url);
iFrame.setAttribute("style",
"display:none;");
iFrame.setAttribute("height",
"0px");
iFrame.setAttribute("width",
"0px");
iFrame.setAttribute("frameborder",
"0");
document.body.appendChild(iFrame);
//
发起请求后这个iFrame就没用了,所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame
= null;
}
比如我们在js代码中,调用一下两个js方法:
function
iOS_alert()
{//调用自定义对话框
loadURL("alert://abc");
}
function
call()
{// js中进行拨打电话处理
loadURL("tel://17715022071");
}
当你触发以上方法的时候,就会进入webview的代理方法中进行拦截。
-
(BOOL)webView:(UIWebView
*)webView
shouldStartLoadWithRequest:(NSURLRequest
*)request
navigationType:(UIWebViewNavigationType)navigationType{
NSURL
* url
= [request
URL];
if
([[url
scheme]
isEqualToString:@"alert"])
{//拦截请求,弹出自定义对话框
UIAlertView
* alertView
= [[UIAlertView
alloc]
initWithTitle:@"test"
message:[url
host]
delegate:nil
cancelButtonTitle:@"OK"
otherButtonTitles:nil];
[alertView
show];
return
NO;
}else
if([[url
scheme]
isEqualToString:@"tel"]){//拦截拨打电话请求
BOOL
result
= [[UIApplication
sharedApplication]
openURL:url];
if
(!result)
{
NSLog(@"您的设备不支持打电话");
}
else
{
NSLog(@"电话打了");
}
return
NO;
}
return
YES;
}
这样我们就可以让js进行native的调用。
三、WKWebView的基本用法
3.1、加载网页
WKWebView
*webView
= [[WKWebView
alloc]
initWithFrame:[UIScreen
mainScreen].bounds];
NSURL
*url
= [NSURL
URLWithString:@"http://www.taobao.com"];
NSURLRequest
*request
= [NSURLRequest
requestWithURL:url];
[webView
loadRequest:request];
[self.view
addSubview:webView];
3.2、几个常用的代理方法
/**
* 根据webView、navigationAction相关信息决定这次跳转是否可以继续进行,这些信息包含HTTP发送请求,如头部包含User-Agent,Accept,refer
* 在发送请求之前,决定是否跳转的代理
* @param webView
* @param navigationAction
* @param decisionHandler
*/
-
(void)webView:(WKWebView
*)webView
decidePolicyForNavigationAction:(WKNavigationAction
*)navigationAction
decisionHandler:(void
(^)(WKNavigationActionPolicy))decisionHandler{
decisionHandler(WKNavigationActionPolicyAllow);
}
/**
* 这个代理方法表示当客户端收到服务器的响应头,根据response相关信息,可以决定这次跳转是否可以继续进行。
* 在收到响应后,决定是否跳转的代理
* @param webView
* @param navigationResponse
* @param decisionHandler
*/
-
(void)webView:(WKWebView
*)webView
decidePolicyForNavigationResponse:(WKNavigationResponse
*)navigationResponse
decisionHandler:(void
(^)(WKNavigationResponsePolicy))decisionHandler{
decisionHandler(WKNavigationResponsePolicyAllow);
}
/**
* 准备加载页面。等同于UIWebViewDelegate: - webView:shouldStartLoadWithRequest:navigationType
*
* @param webView
* @param navigation
*/
-
(void)webView:(WKWebView
*)webView
didStartProvisionalNavigation:(null_unspecified
WKNavigation
*)navigation{
}
/**
* 这个代理是服务器redirect时调用
* 接收到服务器跳转请求的代理
* @param webView
* @param navigation
*/
-
(void)webView:(WKWebView
*)webView
didReceiveServerRedirectForProvisionalNavigation:(null_unspecified
WKNavigation
*)navigation{
}
-
(void)webView:(WKWebView
*)webView
didFailProvisionalNavigation:(null_unspecified
WKNavigation
*)navigation
withError:(NSError
*)error{
}
/**
* 内容开始加载. 等同于UIWebViewDelegate: - webViewDidStartLoad:
*
* @param webView
* @param navigation
*/
-
(void)webView:(WKWebView
*)webView
didCommitNavigation:(null_unspecified
WKNavigation
*)navigation{
}
/**
* 页面加载完成。 等同于UIWebViewDelegate: - webViewDidFinishLoad:
*
* @param webView
* @param navigation
*/
-
(void)webView:(WKWebView
*)webView
didFinishNavigation:(null_unspecified
WKNavigation
*)navigation{
}
/**
* 页面加载失败。 等同于UIWebViewDelegate: - webView:didFailLoadWithError:
*
* @param webView
* @param navigation
* @param error
*/
-
(void)webView:(WKWebView
*)webView
didFailNavigation:(null_unspecified
WKNavigation
*)navigation
withError:(NSError
*)error{
}
-
(void)webViewWebContentProcessDidTerminate:(WKWebView
*)webView
NS_AVAILABLE(10_11,
9_0){
}
/*
我们看看WKUIDelegate的几个代理方法,虽然不是必须实现的,但是如果我们的页面中有调用了js的alert、confirm、prompt方法,我们应该实现下面这几个代理方法,然后在原来这里调用native的弹出窗,因为使用WKWebView后,HTML中的alert、confirm、prompt方法调用是不会再弹出窗口了,只是转化成ios的native回调代理方法
*/
#pragma
mark - WKUIDelegate
-
(void)webView:(WKWebView
*)webView
runJavaScriptAlertPanelWithMessage:(NSString
*)message
initiatedByFrame:(WKFrameInfo
*)frame
completionHandler:(void
(^)(void))completionHandler{
UIAlertController
*alertView
= [UIAlertController
alertControllerWithTitle:@"h5Container"
message:message
preferredStyle:UIAlertControllerStyleAlert];
// [alertView addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
// textField.textColor = [UIColor redColor];
// }];
[alertView
addAction:[UIAlertAction
actionWithTitle:@"我很确定"
style:UIAlertActionStyleDefault
handler:^(UIAlertAction
* _Nonnull
action)
{
completionHandler();
}]];
[self
presentViewController:alertView
animated:YES
completion:nil];
}
显然WKWebView的代理方法提供了比UIWebView颗粒度更细的方法。让开发者可以进行更加细致的配置和处理。
3.3 、Native调用JS中的方法
WKWebView提供的调用js代码的函数是:
-
(void)evaluateJavaScript:(NSString
*)javaScriptString
completionHandler:(void
(^
__nullable)(__nullable
id,
NSError *
__nullable
error))completionHandler;
比如我们在加载的HTML文件中有如下js代码:
<script
type="text/javascript">
function
hello(){
alert("你好!");
}
function
helloWithName(name){
alert(name
+ ",你好!");
}
</script>
我们可以调用如下代码进行js的调用:
[_wkView
evaluateJavaScript:@"hello()"
completionHandler:^(id
item,
NSError
* error)
{
}];
[_wkView
evaluateJavaScript:@"helloWithName('jack')"
completionHandler:^(id
item,
NSError
*error)
{
}];
同UIWebView一样,我们也可以通过字符串的形式进行js调用。
NSString
*jsString
= @"function sayHello(){
\
alert('jack11')
\
}
\
sayHello()";
[_wkView
evaluateJavaScript:jsString
completionHandler:^(id
item,
NSError
*error)
{
}];
jsString
= @"
var p = document.createElement('p'); \
p.innerText
= 'New Line'; \
document.body.appendChild(p); \
";
[_wkView
evaluateJavaScript:jsString
completionHandler:^(id
item,
NSError
*error)
{
}];
3.4、JS中调用Naitve的方法
除了和UIWebView加载一个隐藏的ifame之外,WKWebView自身还提供了一套js调用native的规范。
我们可以在初始化WKWebView的时候,给他设置一个config参数。
//高端配置
//创建配置
WKWebViewConfiguration
*config
= [[WKWebViewConfiguration
alloc]
init];
//创建UserContentController(提供javaScript向webView发送消息的方法)
WKUserContentController
*userContent
= [[WKUserContentController
alloc]
init];
//添加消息处理,注意:self指代的是需要遵守WKScriptMessageHandler协议,结束时需要移除
[userContent
addScriptMessageHandler:self
name:@"NativeMethod"];
//将UserContentController设置到配置文件中
config.userContentController
= userContent;
//高端的自定义配置创建WKWebView
_wkView
= [[YXWKView
alloc]
initWithFrame:self.view.bounds
configuration:config];
NSURL
*url
= [NSURL
URLWithString:@"http://localhost:8080/myDiary/index.html"];
NSURLRequest
*request
= [NSURLRequest
requestWithURL:url];
[_wkView
loadRequest:request];
_wkView.UIDelegate
= self;
_wkView.navigationDelegate
= self;
[self.view
addSubview:_wkView];
我们在js可以通过NativeMethod这个Handler让js代码调用native。
比如在js代码中,我新增了一个方法
<script
type="text/javascript">
function
invokeNativeMethod(){
window.webkit.messageHandlers.NativeMethod.postMessage("我要调用native的方法");
}
</script>
触发以上方法的时候,会在native以下方法中进行拦截处理。
#pragma
mark - WKScriptMessageHandler
-
(void)userContentController:(WKUserContentController
*)userContentController
didReceiveScriptMessage:(WKScriptMessage
*)message{
//这里就是使用高端配置,js调用native的处理地方。我们可以根据name和body,进行桥协议的处理。
NSString
*messageName
= message.name;
if
([@"NativeMethod"
isEqualToString:messageName])
{
id
messageBody
= message.body;
NSLog(@"%@",messageBody);
}
}
四、UIWebView和WKWebView的比较和选择
WKWebView是苹果在WWDC2014发布会中发布IOS8的时候公布WebKit时候使用的新型的H5容器。它与UIWebView相比较,拥有更快的加载速度和性能,更低的内存占用。将UIWebViewDelegate和UIWebView重构成了14个类,3个协议,可以让开发者进行更加细致的配置。
但是他有一个最致命的缺陷,就是WKWebView的请求不能被NSURLProtocol截获。而我们团队开发的app中对于H5容器最佳的优化点主要就在于使用NSURLProtocol技术对于H5进行离线包的处理和H5的图片和Native的图片公用一套缓存的技术。因为该问题的存在,目前我们团队还没有使用WKWebView代替UIWebVIew。
五、联系方式
新浪微博:http://weibo.com/5612984599/info
github:https://github.com/yixiangboy
简书首页:http://www.jianshu.com/users/c3c893a27097/timeline
欢迎加好友、一起交流。
相关文章推荐
- IOS-H5容器的一些探究:UIWebView和WKWebView的比较和选择
- iOS H5容器的一些探究:UIWebView和WKWebView的比较和选择
- iOS H5容器的一些探究(一):UIWebView和WKWebView的比较和选择
- iOS H5容器的一些探究(一):UIWebView和WKWebView的比较和选择
- iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择
- iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择
- iOS H5容器的一些探究:UIWebView和WKWebView的比较和选择
- ios WKWebView 和UIWebView 播放没有声音的方案
- iOS计算UIWebView的高度和iOS8之后的WKWebView的高度问题
- iOS开发之WKWebView代替UIWebView
- iOS H5容器的一些探究(二):iOS下的黑魔法NSURLProtocol
- iOS-WKWebView特性以及与JS交互的一些事
- iOS开发之Xcode8推出的WKWebView与UIWebView的使用
- IOS UIWebView转WKWebView中的js交互问题
- iOS开发之Xcode8推出的WKWebView与UIWebView的使用
- ios之wkwebview与UIwebview的对比
- iOS网络3—UIWebView与WKWebView使用详解
- iOS-69-WKWebview用法与UIWebview对比(附demo、PPT)
- 如何调试iOS App中UIWebView和WKWebView使用的HTML文件