UIWebView的基本用法
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、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;
3、Native调用JS中的方法
比如我们在加载的HTML文件中有如下js代码：
<script type="text/javascript"> function hello(){ alert("你好！"); } function helloWithName(name){ alert(name + "，你好！"); } </script>
我们可以调用<code>- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;</code>函数进行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];
4、JS中调用Naitve的方法
具体让js通知native进行方法调用，我们可以让js产生一个特殊的请求。可以让Native代码可以拦截到，而且不然用户察觉。业界一般的实现方案是在网页中加载一个隐藏的iframe来实现该功能。通过将iframe的src指定为一个特殊的URL，实现在<code>- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;</code>方案中进行拦截处理。对应的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的基本用法
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];
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 、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) { }];
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。
以上为学习文章，随着时间的迁移，好多内容已经过时。
‘UIWebView‘ was deprecated in iOS 12.0: No longer supported; please adopt WKWebView.
UIWebView已经过时