iOS WKWebView与JS交互
WKWebView
iOS8.0之后我们使用 WebKit框架中的WKWebView来加载网页。
WKWebViewConfiguration来配置JS交互。
其中的和JS交互的功能
WKPreferences(是WKWebViewConfiguration的属性) 中的javaScriptEnabled是Bool实行来打开或者关闭javaScript
*javaScriptCanOpenWindowsAutomaticallyBool控制javaScript打开windows。
`WKWebView`中的`navigationDelegate`协议可以监听加载网页的周期和结果。 * 判断链接是否允许跳转 ``` - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler; ``` * 拿到响应后决定是否允许跳转 ``` - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler; ``` * 链接开始加载时调用 ``` - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation; ``` * 收到服务器重定向时调用 ``` - (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation; ``` * 加载错误时调用 ``` - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error; ``` * 当内容开始到达主帧时被调用(即将完成) ``` - (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation; ``` * 加载完成 ``` - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation; ``` * 在提交的主帧中发生错误时调用 ``` - (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error; ``` * 当webView需要响应身份验证时调用(如需验证服务器证书) ``` - (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * _Nullable credential))completionHandler; ``` * 当webView的web内容进程被终止时调用。(iOS 9.0之后) ``` - (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView API_AVAILABLE(macosx(10.11), ios(9.0)); ```
WKWebView中的WKUIDelegate实现UI弹出框的一些处理(警告面板、确认面板、输入框)。
* 在JS端调用alert函数时,会触发此代理方法。JS端调用alert时所传的数据可以通过message拿到。在原生得到结果后,需要回调JS,是通过completionHandler回调。 ``` - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler { NSLog(@"message = %@",message); } ``` * JS端调用confirm函数时,会触发此方法,通过message可以拿到JS端所传的数据,在iOS端显示原生alert得到YES/NO后,通过completionHandler回调给JS端 ``` - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler { NSLog(@"message = %@",message); } ``` * JS端调用prompt函数时,会触发此方法,要求输入一段文本,在原生输入得到文本内容后,通过completionHandler回调给JS ``` - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler { NSLog(@"%s", __FUNCTION__); NSLog(@"%@", prompt); UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"textinput" message:@"JS调用输入框" preferredStyle:UIAlertControllerStyleAlert]; [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) { textField.textColor = [UIColor redColor]; }]; [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { completionHandler([[alert.textFields lastObject] text]); }]]; [self presentViewController:alert animated:YES completion:NULL]; } ```
JS交互实现流程
使用WKWebView,JS调iOS-JS端必须使用window.webkit.messageHandlers.JS_Function_Name.postMessage(null),其中JS_Function_Name是iOS端提供个JS交互的Name。
例:
function iOSCallJsAlert() { alert('弹个窗,再调用iOS端的JS_Function_Name'); window.webkit.messageHandlers.JS_Function_Name.postMessage({body: 'paramters'}); }
在注入JS交互Handler之后会用到[userContentController addScriptMessageHandler:self name:JS_Function_Name]。释放使用到[userContentController removeScriptMessageHandlerForName:JS_Function_Name]
我们JS呼叫iOS通过上面的Handler在iOS本地会有方法获取到。获取到之后我们可以根据iOS和JS之间定义好的协议,来做出相应的操作。
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { NSLog(@"JS调iOS name : %@ body : %@",message.name,message.body); }
处理简单的操作,可以让JS打开新的web页面,在WKWebView的WKNavigationDelegate协议中,判断要打开的新的web页面是否是含有你需要的东西,如果有需要就截获,不打开并且进行本地操作。
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { NSString * url = navigationAction.request.URL.absoluteString; if ([url hasPrefix:@"alipays://"] || [url hasPrefix:@"alipay://"]) { if ([[UIApplication sharedApplication] canOpenURL:navigationAction.request.URL]) { [[UIApplication sharedApplication] openURL:navigationAction.request.URL]; if(decisionHandler) { decisionHandler(WKNavigationActionPolicyCancel); } } } }
iOS端调用JS中的函数只需要知道在JS中的函数名称和函数需要传递的参数。通过原生的方法呼叫JS,
iOSCallJsAlert()是JS端的函数名称,如果有参数iOS端写法iOSCallJsAlert('p1','p2')
[webView evaluateJavaScript:@"iOSCallJsAlert()" completionHandler:nil]
JS和iOS注意的地方
①. 上面提到[userContentController addScriptMessageHandler:self name:JS_Function_Name]是注册JS的MessageHandler,但是WKWebView在多次调用loadRequest,会出现JS无法调用iOS端。我们需要在loadRequest和reloadWebView的时候需要重新注入。(在注入之前需要移除再注入,避免造成内存泄漏)
如果message.body中没有参数,JS代码中需要传null防止iOS端不会接收到JS的交互。
window.webkit.messageHandlers.kJS_Login.postMessage(null)
②. 在WKWebView中点击没有反应的时候,可以参考一下处理
-(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures { if (!navigationAction.targetFrame.isMainFrame) { [webView loadRequest:navigationAction.request]; } return nil; }
③. HTML中不能通过拨号来拨打iOS的电话。需要在iOS端的WKNavigationDelegate中截取电话在使用原生进行调用拨打电话。其中的[navigationAction.request.URL.scheme isEqualToString:@"tel"]中的@"tel"是JS中的定义好,并iOS端需要知道的。发送请求前决定是否跳转,并在此拦截拨打电话的URL
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { /// 拨号 if ([navigationAction.request.URL.scheme isEqualToString:@"tel"]) { decisionHandler(WKNavigationActionPolicyCancel); NSString * mutStr = [NSString stringWithFormat:@"telprompt://%@",navigationAction.request.URL.resourceSpecifier]; if ([[UIApplication sharedApplication] canOpenURL:mutStr.URL]) { if (iOS10()) { [[UIApplication sharedApplication] openURL:mutStr.URL options:@{} completionHandler:^(BOOL success) {}]; } else { [[UIApplication sharedApplication] openURL:mutStr.URL]; } } } else { decisionHandler(WKNavigationActionPolicyAllow); } }
④. 在执行goBack或reload或goToBackForwardListItem之后请不要马上执行loadRequest,使用延迟加载。
⑤在使用中JS端:H5、DOM绑定事件。每一次JS方法调用iOS方法的时候,我都为这个JS方法绑定一个对应的callBack方法,这样的话,同时在发送的消息中告诉iOS需要回调,iOS方法就可以执行完相关的方法后,直接回调相应的callBack方法,并携带相关的参数,这样就可以完美的进行交互了。这是为了在JS调用iOS的时候,在- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message获取到信息后,iOS端调用[_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {}];给JS发送消息,保证JS在获取相关返回值时,一定能拿到值。
⑥根据需求清楚缓存和Cookie。
JS端可以参考:漫谈js自定义事件、DOM/伪DOM自定义事件
WKWebview加载远程JS文件和本地JS文件
在页面请求成功 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
completionHandler中JS是可以再收到调用之后给webView回调。
WKWebView远程网页加载远程JS文件
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation { [self.webView evaluateJavaScript:@"var script = document.createElement('script');" "script.type = 'text/javascript';" "script.src = 'http://www.ohmephoto.com/test.js';" "document.getElementsByTagName('head')[0].appendChild(script);" completionHandler:^(id _Nullable object, NSError * _Nullable error) { NSLog(@"------error = %@ object = %@",error,object); }]; }
WKWebView远程网页加载本地JS
在xcode中新建找到Other->Empty,确定文件名XXX.js 一般需要在本地加载的JS都会很小,用原生JS直接加载就可以了 题外:看到网友是自定义NSURLProtocol类 - 高端大气上档次,请自行查阅。 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation { NSString * plistPath = [[NSBundle mainBundle] pathForResource:@"XXX" ofType:@"js"]; NSString * data = [NSString stringWithContentsOfFile:plistPath encoding:NSUTF8StringEncoding error:nil];// [[NSMutableDictionary alloc] initWithContentsOfFile:plistPath]; [self.webView evaluateJavaScript:[NSString stringWithFormat:@"javascript:%@",data] completionHandler:^(id _Nullable object, NSError * _Nullable error) { }]; }
第三方库WebViewJavascriptBridge
GitHub地址WebViewJavascriptBridge
不做过多解释,很好用的第三方库。安卓也有相应的库。同样很强大。
WKWebView进度条
声明属性
@property (nonatomic, strong) UIProgressView *progressView;
//进度条初始化
- (UIProgressView *)progressView { if (!_progressView) { _progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 2)]; _progressView.backgroundColor = [UIColor blueColor]; _progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f); _progressView.progressTintColor = [UIColor app_color_yellow_eab201]; [self.view addSubview:self.progressView]; } return _progressView; }
给ViewController中添加Observer
[self.webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
在dealloc找那个删除Observer
[self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
在observeValueForKeyPath中添加对progressView的进度显示操作
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context { if ([keyPath isEqualToString:@"estimatedProgress"]) { self.progressView.progress = self.webView.estimatedProgress; if (self.progressView.progress == 1) { WeakSelfDeclare [UIView animateWithDuration:0.25f delay:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^ { weakSelf.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.4f); } completion:^(BOOL finished) { weakSelf.progressView.hidden = YES; }]; } } }
显示progressView
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation { self.progressView.hidden = NO; self.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f); [self.view bringSubviewToFront:self.progressView]; }
隐藏progressView
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation { self.progressView.hidden = YES; }
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error { if(error.code==NSURLErrorCancelled) { [self webView:webView didFinishNavigation:navigation]; } else { self.progressView.hidden = YES; } }
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error { self.progressView.hidden = YES; [self.navigationItem setTitleWithCustomLabel:@"加载失败"]; }
WKWebView清除缓存
有人是这么写的
- (void)clearCache { /* 取得Library文件夹的位置*/ NSString *libraryDir = NSSearchPathForDirectoriesInDomains(NSLibraryDirectory,NSUserDomainMask, YES)[0]; /* 取得bundle id,用作文件拼接用*/ NSString *bundleId = [[[NSBundle mainBundle] infoDictionary]objectForKey:@"CFBundleIdentifier"]; /* * 拼接缓存地址,具体目录为App/Library/Caches/你的APPBundleID/fsCachedData */ NSString *webKitFolderInCachesfs = [NSString stringWithFormat:@"%@/Caches/%@/fsCachedData",libraryDir,bundleId]; NSError *error; /* 取得目录下所有的文件,取得文件数组*/ NSFileManager *fileManager = [NSFileManager defaultManager]; //NSArray *fileList = [[NSArray alloc] init]; //fileList便是包含有该文件夹下所有文件的文件名及文件夹名的数组 NSArray *fileList = [fileManager contentsOfDirectoryAtPath:webKitFolderInCachesfs error:&error]; /* 遍历文件组成的数组*/ for(NSString * fileName in fileList) { /* 定位每个文件的位置*/ NSString * path = [[NSBundle bundleWithPath:webKitFolderInCachesfs] pathForResource:fileName ofType:@""]; /* 将文件转换为NSData类型的数据*/ NSData * fileData = [NSData dataWithContentsOfFile:path]; /* 如果FileData的长度大于2,说明FileData不为空*/ if(fileData.length >2) { /* 创建两个用于显示文件类型的变量*/ int char1 =0; int char2 =0; [fileData getBytes:&char1 range:NSMakeRange(0,1)]; [fileData getBytes:&char2 range:NSMakeRange(1,1)]; /* 拼接两个变量*/ NSString *numStr = [NSString stringWithFormat:@"%i%i",char1,char2]; /* 如果该文件前四个字符是6033,说明是Html文件,删除掉本地的缓存*/ if([numStr isEqualToString:@"6033"]) { [[NSFileManager defaultManager] removeItemAtPath:[NSString stringWithFormat:@"%@/%@",webKitFolderInCachesfs,fileName]error:&error]; continue; } } } }
也可以这样写
- (void)cleanCacheAndCookie { //清除cookies NSHTTPCookie *cookie; NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage]; for (cookie in [storage cookies]) { [storage deleteCookie:cookie]; } [[NSURLCache sharedURLCache] removeAllCachedResponses]; NSURLCache * cache = [NSURLCache sharedURLCache]; [cache removeAllCachedResponses]; [cache setDiskCapacity:0]; [cache setMemoryCapacity:0]; WKWebsiteDataStore *dateStore = [WKWebsiteDataStore defaultDataStore]; [dateStore fetchDataRecordsOfTypes:[WKWebsiteDataStore allWebsiteDataTypes] completionHandler:^(NSArray * __nonnull records) { for (WKWebsiteDataRecord *record in records) { [[WKWebsiteDataStore defaultDataStore] removeDataOfTypes:record.dataTypes forDataRecords:@[record] completionHandler:^ { NSLog(@"Cookies for %@ deleted successfully",record.displayName); }]; } }]; }
- (void)dealloc { [_webView stopLoading]; [_webView setNavigationDelegate:nil]; [self clearCache]; [self cleanCacheAndCookie]; }
WKWebView修改userAgent
在项目中我们游戏直接使用以下方式写入userAgent,出现了URL可以加载,但是URL里面的资源无法加载问题。但是在微信和外部Safari是可以的。后来查出,不要去直接整个修改掉userAgent。要在原有的userAgent加上你需要的userAgent字符串,进行重新注册就可以了。(具体原因可能是外部游戏引擎,会默认取系统的userAgent来做他们的处理,你改掉整个会出现问题)。
[[NSUserDefaults standardUserDefaults] registerDefaults:@{@"UserAgent":@"CustomUserAgent"}]; [[NSUserDefaults standardUserDefaults] synchronize]; [self.webView setCustomUserAgent:newUserAgent];
使用下面的修改userAgent
使用NSUserDefaults修改本地的userAgent
使用WKWebView的setCustomUserAgent修改网络userAgent
[self.webView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id result, NSError *error) { NSString * userAgent = result; NSString * newUserAgent = [userAgent stringByAppendingString:@"CustomUserAgent"]; [[NSUserDefaults standardUserDefaults] registerDefaults:@{@"UserAgent":newUserAgent}]; [[NSUserDefaults standardUserDefaults] synchronize]; [self.webView setCustomUserAgent:newUserAgent]; }];
WKWebView时间显示Nan问题 (js时间处理)
1 正常的处理如下:
1. var regTime = result.RegTime; 2. var dRegTime = new Date(regTime); 3. var regHtml = dRegTime.getFullYear() + "年" + dRegTime.getMonth() + "月";
在iOS系统下,JS需要正则把-替换成/
var regTime = result.RegTime.replace(//-/g, "/");
总结
iOS中的WKWebView使用简单方便。使用它你只用将你用到的进行封装。在你的ViewController中进行初始化WKWebView并加载和对其配置,就能完整的使用了。
iOS端和JS互相调用,有简单的函数方法进行互相配合。在交互的时候需要双方约定好特定的事件名称。比如登录、打开支付、弹出分享等常规操作。
JS向iOS端发送消息使用window.webkit.messageHandlers.JS_Function_Name.postMessage(null)。
在iOS端接受JS发来的消息需要WKUserContentController添加Handler并且处理协议,在协议中判断并处理JS端需要iOS端做的事件。
iOS调用JS直接使用WKWebView的[webView evaluateJavaScript:@"JS函数名称('参数1','参数2')" completionHandler:nil]来向JS发送消息。
作者:燃烧的大叔
链接:https://www.jianshu.com/p/20cfd4f8c4ff