要掌握iOS与JS交互，首先一定要掌握的就是，iOS的h5容器UIWebView和WKWebView，下面我们就分别来说说他们的用法和优劣。
一、概述
UIWebView自iOS2就有，WKWebView从iOS8才有，毫无疑问WKWebView将逐步取代UIWebView。WKWebView只能用代码创建，而且自身就支持了右滑返回手势allowsBackForwardNavigationGestures和加载进度estimatedProgress等一些UIWebView不具备却非常好用的属性。通过简单的测试即可发现UIWebView占用过多内存。WKWebView网页加载速度也有提升，但是并不像内存那样提升那么多。下面列举一些其它的优势：
- 更多的支持HTML5的特性
- 官方宣称的高达60fps的滚动刷新率以及内置手势
- 与Safari相同的JavaScript引擎
- 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(官方文档说明)
- 另外用的比较多的，增加加载进度属性：estimatedProgress
UIWebView用法
1、加载网页或本地文件
UIWebView *webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
webView.delegate = self;
[self.view addSubview:webView];
// 网页url
// NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
// 本地文件
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:path];
// 网络请求
NSURLRequest *request =[NSURLRequest requestWithURL:url];
// 加载网页
[self.webview loadRequest:request];
2、UIWebView的对象方法
// 加载Data数据创建一个webView
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)encodingName baseURL:(NSURL *)baseURL
// 加载本地HTML创建一个webView
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL
// 加载一个请求创建一个webView
- (void)loadRequest:(NSURLRequest *)request
// 刷新网页
- (void)reload;
// 停止加载
- (void)stopLoading;
// 后退函数
- (void)goBack;
// 前进函数
- (void)goForward;
// 执行JS方法
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
3、UIWebView的属性 :
// 代理属性 重点需要知道代理方法的使用
@property (nullable, nonatomic, assign) id <UIWebViewDelegate> delegate;
// 这个是webView内部的scrollView 只读,但是利用这个属性,设置scrollView的代理,就可以控制整个webView的滚动事件
@property(nonatomic, readonly, strong) UIScrollView *scrollView;
// webView的请求,这个属性一般在整个加载完成后才能拿到
@property (nullable, nonatomic, readonly, strong) NSURLRequest *request;
// 如果这个属性为YES,才能后退
@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack;
// 如果这个属性为YES,才能前进
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward;
// 这个属性很好用,如果为YES证明webView还在加载数据,所有数据加载完毕后,webView就会为No
@property (nonatomic, readonly, getter=isLoading) BOOL loading;
// YES代表网页可以缩放,NO代表不可以缩放
@property (nonatomic) BOOL scalesPageToFit;
// 设置某些数据变为链接形式，这个枚举可以设置如电话号，地址，邮箱等转化为链接
@property (nonatomic) UIDataDetectorTypes dataDetectorTypes NS_AVAILABLE_IOS(3_0);
// 设置是否使用内联播放器播放视频
@property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0);
// 设置视频是否自动播放
@property (nonatomic) BOOL mediaPlaybackRequiresUserAction NS_AVAILABLE_IOS(4_0);
// 设置音频播放是否支持ari play功能
@property (nonatomic) BOOL mediaPlaybackAllowsAirPlay NS_AVAILABLE_IOS(5_0);
// 设置是否将数据加载入内存后渲染界面
@property (nonatomic) BOOL suppressesIncrementalRendering NS_AVAILABLE_IOS(6_0);
// 设置用户是否能打开keyboard交互
@property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0);
/* IOS7 */ 以后的新特性
// 这个属性用来设置一种模式，当网页的大小超出view时，将网页以翻页的效果展示，枚举如下：
@property (nonatomic) UIWebPaginationMode paginationMode NS_AVAILABLE_IOS(7_0);
typedef NS_ENUM(NSInteger, UIWebPaginationMode) {
UIWebPaginationModeUnpaginated, //不使用翻页效果
UIWebPaginationModeLeftToRight, //将网页超出部分分页，从左向右进行翻页
UIWebPaginationModeTopToBottom, //将网页超出部分分页，从上向下进行翻页
UIWebPaginationModeBottomToTop, //将网页超出部分分页，从下向上进行翻页
UIWebPaginationModeRightToLeft //将网页超出部分分页，从右向左进行翻页
};
// 这个属性决定CSS的属性分页是可用还是忽略。默认是UIWebPaginationBreakingModePage
@property (nonatomic) UIWebPaginationBreakingMode paginationBreakingMode NS_AVAILABLE_IOS(7_0);
// 设置每一页的长度
@property (nonatomic) CGFloat pageLength NS_AVAILABLE_IOS(7_0);
// 设置每一页的间距
@property (nonatomic) CGFloat gapBetweenPages NS_AVAILABLE_IOS(7_0);
// 获取页数
@property (nonatomic, readonly) NSUInteger pageCount NS_AVAILABLE_IOS(7_0);
4、相关代理协议
#pragma mark - UIWebViewDelegate
// 请求发送前都会调用该方法,返回NO则不处理这个请求,不加载网页
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSLog(@"允许加载网页");
return YES;
}
// 请求发送之后开始接收响应之前会调用这个方法
- (void)webViewDidStartLoad:(UIWebView *)webView {
NSLog(@"开始加载网页");
}
// 请求发送之后,并且服务器已经返回响应之后调用该方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"网页加载完成");
}
// 网页请求失败则会调用该方法
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
NSLog(@"网页加载错误时调用");
}
5、OC调用JS方法
OC调用JS函数主要通过下面方法：
- (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script;
例:
[self.webView stringByEvaluatingJavaScriptFromString:@"alertMobile()"];
调用这个方法需要在网页加载完成之后，因为这个时候整个html页面包括js/css已经注入到webView中，此时调用方法才会有响应，相反网页加载完成之前调用界面不会有任何响应
6、JS调用OC方法
JS是不能执行OC代码的，但是可以变相的执行，JS可以将要执行的操作封装到网络请求里面，然后OC拦截这个请求，获取URL里面的字符串解析即可，这里用到代理协议的如下方法：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
有了上面的方法后，很显然，想要JS调用OC我们就可以采用在按钮点击的后重定向一个URL，这个URL携带OC的方法名及参数信息，然后在这个方法中拿到对应的URL，对URL进行解析，提取对应的方法名和参数信息，调用OC相应的方法，从而实现了交互的可能
iiooss://showSendNumber_msg_?13300001111&这个周末去爬山
在这个URL中前面的"iiooss://"是URL的scheme，通过这个来提取我们关心的URL，对其他URL不做任何处理，后面就是OC方法和参数的信息了，这里用"?"来分割分割方法名和参数，"&"来分割多个参数，"_"用作OC方法名中冒号的替换。
例:
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
// 获取请求路径
NSString *urlString = [[request URL] absoluteString];
// 解码
urlString = [urlString stringByRemovingPercentEncoding];
// 定义的协议
NSString *scheme = @"iiooss://";
if ([urlString hasPrefix:scheme]) {
// 获得协议后面的路径
NSString *subPath = [urlString substringFromIndex:scheme.length];
if ([subPath containsString:@"?"]) {
// 利用?切割路径 分割方法与参数
NSArray *components = [subPath componentsSeparatedByString:@"?"];
// 方法名
NSString *methodName = [components firstObject];
methodName = [methodName stringByReplacingOccurrencesOfString:@"_" withString:@":"];
// 参数
NSString *parameter = [components lastObject];
NSArray *params = [parameter componentsSeparatedByString:@"&"];
/// 根据方法名与参数直接调用实现，
/// 也可以考虑:- (id)performSelector:(SEL)aSelector;
/// 或者NSInvocation
}
else
{
NSString *methodName = [subPath stringByReplacingOccurrencesOfString:@"_" withString:@":"];
/// 根据方法名与参数直接调用实现，
/// 也可以考虑:- (id)performSelector:(SEL)aSelector;
/// 或者NSInvocation
}
}
return YES;
}
7、缓存
尽量使用 GET 请求，iOS 系统 SDK 会自动帮你做缓存。你需要的仅仅是设置下内存缓存大小、磁盘缓存大小、以及缓存路径。只要设置了这两行代码，基本就可满足80%的缓存需求。
NSURLCache *urlCache = [[NSURLCache alloc] initWithMemoryCapacity:4*1024*1024 diskCapacity:20*1024*1024 diskPath:nil];
[NSURLCache setSharedURLCache:urlCache];
WKWebView的用法
Classes:
WKBackForwardList: 之前访问过的 web 页面的列表，可以通过后退和前进动作来访问到。
WKBackForwardListItem: webview 中后退列表里的某一个网页。
WKFrameInfo: 包含一个网页的布局信息。
WKNavigation: 包含一个网页的加载进度信息。
WKNavigationAction: 包含可能让网页导航变化的信息，用于判断是否做出导航变化。
WKNavigationResponse: 包含可能让网页导航变化的返回内容信息，用于判断是否做出导航变化。
WKPreferences: 概括一个 webview 的偏好设置。
WKProcessPool: 表示一个 web 内容加载池。
WKUserContentController: 提供使用 JavaScript post 信息和注射 script 的方法。
WKScriptMessage: 包含网页发出的信息。
WKUserScript: 表示可以被网页接受的用户脚本。
WKWebViewConfiguration: 初始化 webview 的设置。
WKWindowFeatures: 指定加载新网页时的窗口属性。
Protocols
WKNavigationDelegate: 提供了追踪主窗口网页加载过程和判断主窗口和子窗口是否进行页面加载新页面的相关方法。
WKScriptMessageHandler: 提供从网页中收消息的回调方法。
WKUIDelegate: 提供用原生控件显示网页的方法回调。
1、加载网页或本地文件
WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
[self.view addSubview:webView];
// 网页url
// NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
// 网络请求
// NSURLRequest *request =[NSURLRequest requestWithURL:url];
// 加载网页
// [webView loadRequest:request];
// 创建url
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
// 创建URL
NSURL *url = [NSURL fileURLWithPath:path];
// 加载文件
[webView loadFileURL:url allowingReadAccessToURL:url];
self.webView = webView;
2、WKWebView的对象方法
// 这是加载网页最常用的一种方式，通过一个网页URL来加载一个WKWebView，这个URL可以是远程的也可以是本地的，例如我加载百度的主页
- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;
// 根据一个文件,加载一个WKWebView
- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL NS_AVAILABLE(10_11, 9_0);
// 这个方法需要将html文件读取为字符串从而加载为WKWebView，其中baseURL是我们自己设置的一个路径，用于寻找html文件中引用的图片等素材。
- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
// 这个方式使用的比较少，但也更加自由，其中data是文件数据，MIMEType是文件类型，characterEncodingName是编码类型，baseURL是素材资源路径
- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL NS_AVAILABLE(10_11, 9_0);
3、WKWebView的属性
// UIWebView 中会自动保存Cookie，如果登录了一次下次再次进入的时候,会记住登录状态
// 在WKWebView中，新增一个configuration属性, configuration 让WKWebView知道登录状态，
// configuration 可以通过已有的Cookie进行设置，也可以通过保存上一次的configuration进行设置
// WKWebViewConfiguration类中也有一些相应的属性
@property (nonatomic, readonly, copy) WKWebViewConfiguration *configuration;
// WKWebView中,加入了网站导航的概念,这个对象决定主框架导航加载方法协议。
@property (nullable, nonatomic, weak) id <WKNavigationDelegate> navigationDelegate;
// WKWebView中,加入了网站窗口的概念,这个对象决了webView窗口的一些方法协议。
@property (nullable, nonatomic, weak) id <WKUIDelegate> UIDelegate;
// WKWebView中,加入了网站列表的概念,这个WEBBackForwardList对象是以前在Web视图访问的网页，可以通过去后退或前进
@property (nonatomic, readonly, strong) WKBackForwardList *backForwardList;
4、WKWebView的代理方法
/**
* web内容处理中断时会触发
* 当 WKWebView 总体内存占用过大，页面即将白屏的时候，系统会调用上面的回调函数，我们在该函数里执行[webView reload](这个时候 webView.URL 取值尚不为 nil）解决白屏问题。
*/
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView {
NSLog(@"webViewWebContentProcessDidTerminate: 当Web视图的网页内容被终止时调用。");
}
/**
* 页面加载完成。 等同于UIWebViewDelegate: - webViewDidFinishLoad:
*
* @param webView
* @param navigation
*/
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
NSLog(@"webView:didFinishNavigation: 响应渲染完成后调用该方法 webView : %@ -- navigation : %@ \n\n",webView,navigation);
}
/**
* 准备加载页面。等同于UIWebViewDelegate: - webView:shouldStartLoadWithRequest:navigationType
*
* @param webView
* @param navigation
*/
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation {
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
NSLog(@"webView:didStartProvisionalNavigation: 开始请求 \n\n");
}
/**
* 内容开始加载. 等同于UIWebViewDelegate: - webViewDidStartLoad:
*
* @param webView
* @param navigation
*/
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
NSLog(@"webView:didCommitNavigation: 响应的内容到达主页面的时候响应,刚准备开始渲染页面应用 \n\n");
}
/**
* 页面加载失败时调用
*/
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {
// 类似 UIWebView 的- webView:didFailLoadWithError:
NSLog(@"webView:didFailProvisionalNavigation:withError: 启动时加载数据发生错误就会调用这个方法。 \n\n");
}
/**
* 页面加载失败。 等同于UIWebViewDelegate: - webView:didFailLoadWithError:
*
* @param webView
* @param navigation
* @param error
*/
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error {
NSLog(@"webView:didFailNavigation: 当一个正在提交的页面在跳转过程中出现错误时调用这个方法。 \n\n");
}
/**
* 根据webView、navigationAction相关信息决定这次跳转是否可以继续进行,这些信息包含HTTP发送请求，如头部包含User-Agent,Accept,refer
* 在发送请求之前，决定是否跳转的代理
* @param webView
* @param navigationAction
* @param decisionHandler
*/
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSLog(@"请求前会先进入这个方法 webView:decidePolicyForNavigationActiondecisionHandler: %@ \n\n ",navigationAction.request);
decisionHandler(WKNavigationActionPolicyAllow);
}
/**
* 这个代理方法表示当客户端收到服务器的响应头，根据response相关信息，可以决定这次跳转是否可以继续进行。
* 在收到响应后，决定是否跳转的代理
* @param webView
* @param navigationResponse
* @param decisionHandler
*/
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {
NSLog(@"返回响应前先会调用这个方法 并且已经能接收到响应webView:decidePolicyForNavigationResponse:decisionHandler: Response?%@ \n\n",navigationResponse.response);
decisionHandler(WKNavigationResponsePolicyAllow);
}
/**
* 这个代理是服务器redirect时调用
* 接收到服务器跳转请求的代理
* @param webView
* @param navigation
*/
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation {
NSLog(@"webView:didReceiveServerRedirectForProvisionalNavigation: 重定向的时候就会调用 \n\n");
}
WKScriptMessageHandler：必须实现的函数，是APP与js交互，提供从网页中收消息的回调方法
// 是js与APP交互，提供从网页中收消息的回调方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
与JS的alert、confirm、prompt交互，我们希望用自己的原生界面，而不是JS的，就可以使用这个代理类来实现。
// 新开一个WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
// prompt 输入框
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
// confirm 确认框
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
// alert 警告框
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
5、网页导航刷新有关函数
@property (nonatomic, readonly) BOOL canGoBack;
@property (nonatomic, readonly) BOOL canGoForward;
- (WKNavigation *)goBack;
- (WKNavigation *)goForward;
- (WKNavigation *)reload;
- (WKNavigation *)reloadFromOrigin; // 增加的函数
- (WKNavigation *)goToBackForwardListItem:(WKBackForwardListItem *)item; // 增加的函数
- (void)stopLoading;
reloadFromOrigin会比较网络数据是否有变化，没有变化则使用缓存，否则从新请求。
goToBackForwardListItem：比向前向后更强大，可以跳转到某个指定历史页面
6、一些常用属性
allowsBackForwardNavigationGestures：BOOL类型，是否允许左右划手势导航，默认不允许
estimatedProgress：加载进度，取值范围0~1
title：页面title
scrollView.scrollEnabled：是否允许上下滚动，默认允许
backForwardList：WKBackForwardList类型，访问历史列表，可以通过前进后退按钮访问，或者通过goToBackForwardListItem函数跳到指定页面
7、JS调用OC
index.html:
// 内联事件、脚本事件或DOM事件调用此函数
function onClickButton() {
// JS通知WKWebView
window.webkit.messageHandlers.senderModel.postMessage("参数");
}
// webview的相关配置
WKWebViewConfiguration *config = [WKWebViewConfiguration new];
// 初始化偏好设置属性：preferences
config.preferences = [WKPreferences new];
// 默认值中的最小字体大小是0
config.preferences.minimumFontSize = 10;
// 是否支持JavaScript
config.preferences.javaScriptEnabled = YES;
// 不通过用户交互，是否可以打开窗口
config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
// js配置---通过JS与webView内容交互
config.userContentController = [WKUserContentController new];
// js通过senderModel来调用
[config.userContentController addScriptMessageHandler:self name:@"senderModel"];
WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];
NSURL *path = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
webView.UIDelegate = self;
webView.navigationDelegate = self;
[webView loadRequest:[NSURLRequest requestWithURL:path]];
[self.view addSubview:webView];
self.webView = webView;
响应:
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"方法名:%@", message.name);
NSLog(@"参数:%@", message.body);
// 方法名
NSString *methods = [NSString stringWithFormat:@"%@:", message.name];
/// 根据方法名与参数直接调用实现，
/// 也可以考虑:- (id)performSelector:(SEL)aSelector;参数以字面量对象形式
/// 或者NSInvocation
}
8、OC调用JS
oc调用js就特别简单了，只需WKWebView调用下面方法即可。
NSString *jsActionStr = [NSString stringWithFormat:@"actionName('%@')", @"参数"];
[self.webView evaluateJavaScript:jsActionStr completionHandler:^(id _Nullable data, NSError * _Nullable error) {
if (error) {
NSLog(@"错误:%@", error.localizedDescription);
}
}];
响应:
index.html:
// 函数
function actionName(params) {
document.getElementById('spanId').innerHTML = params;
}
9、WKUserScript JS注入
在WebKit框架中，我们还可以预先添加JS方法，供其ta人员调用。WKUserScript就是帮助我们完成JS注入的类，它能帮助我们在页面填充前或js填充完成后调用。
WKUserScript核心方法:
- (instancetype)initWithSource:(NSString *)source injectionTime:(WKUserScriptInjectionTime)injectionTime forMainFrameOnly:(BOOL)forMainFrameOnly;
在WKUserScriptInjectionTime枚举中有两个状态:
1. WKUserScriptInjectionTimeAtDocumentStart：js加载前执行。
2. WKUserScriptInjectionTimeAtDocumentEnd：js加载后执行。
10、历史记录
// 查询历史记录
WKBackForwardList *backForwardList = self.webView.backForwardList;
暂时先这么多吧，以后想起什么再补充，都是些简单的应用，具体实现根据具体情况而定，写程序不要写死，灵活应用方为上策，这里呢也算一个小的总结吧，避免重复造轮子。
网友评论